Как грамотно задать элементу событие onclick

@Kerduk · Регистрация: 24.04.2018

Студворк — интернет-сервис помощи студентам

Обратите внимание на html разметку, меня интересует как правильно задать onclick элементу.
Сделал три варианта, они все работают. В силу того, что я недавно начал изучение JS,
я не могу понять какой из этих вариантов более грамотный.

HTML5
1
2
3
<div class ="block1" onclick ="one()"> 1 вариант </div>  <!-- 1 вариант  -->
<div class ="block2" onclick = two() > 2 вариант </div>  <!-- 2 вариант  -->
<div class ="block3"> 3 вариант </div>                   <!-- 3 вариант  -->

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
function one(){
alert('Do you like, what you see?')
}
 
function two(){
alert('1000-7')
}
 
let three = document.querySelector('.block3');
 
three.onclick = function (){
alert('It gets bigger, when i pull on it');
}

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.block1{
margin-top:10px;
padding:10px;
border: 3px solid black;
}
 
.block2{
margin-top:10px;
padding:10px;
border: 3px solid black;
}
 
.block3{
margin-top:10px;
padding:10px;
border: 3px solid black;
}

@klyapa · 12.10.2021, 19:55

У вас отсутствует 4-ый, самый грамотный вариант:

JavaScript
1
2
3
4
5
var elem = document.querySelector('.block3');
 
elem.addEventListener('click', function (e) {
    alert(this.innerText);
});

@Kerduk · 12.10.2021, 20:46 **[ТС]**

klyapa,

JavaScript
1
2
3
4
5
var elem = document.querySelector('.block3');
 
elem.addEventListener('click', function (e) {
    alert(this.innerText);
});

Благодарю за ответ, но я не совсем понимаю это логику.
Не могли бы вы пожалуйста сделать так, чтобы результат был как у меня,
то есть выводил три разных сообщения при клике на три блока.
И чтобы сообщения хранились в JS коде.

@klyapa · 12.10.2021, 21:25

Сообщение от Kerduk

выводил три разных сообщения при клике на три блока. И чтобы сообщения хранились в JS коде.

HTML5
1
2
3
4
5
<div class="box">
    <div data-mess="0"> 1 вариант </div>
    <div data-mess="1"> 2 вариант </div>
    <div data-mess="2"> 3 вариант </div>
</div>

JavaScript
1
2
3
4
5
6
7
8
9
const message = [
    "Do you like, what you see?",
    "1000-7",
    "It gets bigger, when i pull on it"
];
 
document.querySelector('.box').addEventListener('click', function (e) {
    if(e.target.dataset.mess) alert( message[e.target.dataset.mess] ); 
});

Добавлено через 8 минут

CSS
1
2
3
4
5
div[data-mess]{
    margin-top:10px;
    padding:10px;
    border: 3px solid black;
}

Новые блоги и статьи Все статьи Все блоги /
Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных через динамический список в справочнике Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .	Функция заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .
Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем	10 пpимет, которые всегда сбываются Maks 31.03.2026 1. Чтобы, наконец, пришла маршрутка, надо закурить. Если сигарета последняя, маршрутка придет еще до второй затяжки даже вопреки расписанию. 2. Нaдоели зима и снег? Не надо переезжать. Достаточно. . .	Перемещение выделенных строк ТЧ из одного документа в другой Maks 31.03.2026 Реализация из решения ниже выполнена на примере нетипового документа "ВыдачаОборудованияНаСпецтехнику" с единственной табличной частью "ОборудованиеИКомплектующие" разработанного в конфигурации КА2. . . .

Как грамотно задать элементу событие onclick

Решение