Обработчик события

Обработчики событий встраиваются в документы как атрибуты тегов HTML, которым вы назначаете код JavaScript для выполнения. Общий синтаксис

‹TAG eventHandler="Код JavaScript"›

где TAG — некоторый тег HTML, а eventHandler — имя обработчика события.

Например, предположим, что вы создали функцию JavaScript под названием compute. Вы можете заставить Navigator выполнять эту функцию, когда пользователь нажимает кнопку, назначив вызов функции обработчику события onClick кнопки:

‹INPUT TYPE="button" VALUE="Рассчитать" onClick="вычислить(эта.форма)"›

Возможны различные типы событий.

Например:

• Пользователь выбирает, щелкает или наводит курсор на определенный элемент.
• Пользователь выбирает клавишу на клавиатуре.
• Пользователь изменяет размер или закрывает окно браузера.
• Веб-страница завершает загрузку.
• Отправляется форма.
• Видео воспроизводится, приостанавливается или завершается.
• Возникает ошибка.

Чтобы отреагировать на событие, вы прикрепляете к нему обработчик события. Это блок кода (обычно это функция JavaScript, которую вы, как программист, создаете), который запускается при возникновении события. Когда такой блок кода определен для запуска в ответ на событие, мы говорим, что регистрируем обработчик события. Примечание. Обработчики событий иногда называют прослушивателями событий — для наших целей они в значительной степени взаимозаменяемы, хотя, строго говоря, они работают вместе. Прослушиватель отслеживает происходящее событие, а обработчик — это код, который запускается в ответ на это событие.

const btn = document.querySelector («кнопка»);

function random(number) {
return Math.floor(Math.random() * (number+1));
}

btn.addEventListener('click', () =› {
const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;< br /> document.body.style.backgroundColor = rndCol;
});

В этом коде мы сохраняем ссылку на элемент <button> внутри константы с именем btn, используя функцию Document.querySelector().

Атрибуты обработчика событий HTML

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

Во-первых, код обработчика событий смешивается с HTML-кодом, что затрудняет поддержку и расширение кода.

Во-вторых, это проблема времени. Если элемент загружается полностью перед кодом JavaScript, пользователи могут начать взаимодействовать с элементом на веб-странице, что вызовет ошибку.

Например, предположим, что следующая функция showAlert() определена во внешнем файле JavaScript:

<input type="button" value="Save" onclick="showAlert()">
Code language: HTML, XML  

И когда страница загружена полностью, а JavaScript не загружен, функция showAlert() не определена. Если пользователи нажмут кнопку в этот момент, произойдет ошибка.

Обработчики событий DOM уровня 0

Каждый элемент имеет свойства обработчика событий, такие как onclick. Чтобы назначить обработчик события, вы устанавливаете свойство в функцию, как показано в примере:

let btn = document.querySelector('#btn');

btn.onclick = function() {
alert('Clicked!');
};

Язык кода: JavaScript

В этом случае анонимная функция становится методом элемента button. Следовательно, значение this эквивалентно элементу. И вы можете получить доступ к свойствам элемента внутри обработчика событий:

let btn = document.querySelector('#btn');

btn.onclick = function() {
alert(this.id);
};

Язык кода: JavaScript

Выход:

btn

Используя значение this внутри обработчика событий, вы можете получить доступ к свойствам и методам элемента.

Чтобы удалить обработчик событий, установите для свойства обработчика событий значение null:

btn.onclick = null;

Язык кода: JavaScript

Обработчики событий DOM уровня 0 по-прежнему широко используются из-за своей простоты и кросс-браузерной поддержки.

Обработчики событий DOM уровня 2

Обработчики событий DOM уровня 2 предоставляют два основных метода работы с прослушивателями событий регистрации/отмены регистрации:

• addEventListener() — зарегистрировать обработчик события
• removeEventListener() — удалить обработчик события

Краткое содержание

• Существует три способа назначения обработчика событий: атрибут обработчика событий HTML, свойство обработчика событий элемента и addEventListener().
• Следует избегать назначения обработчика событий через атрибут обработчика событий HTML.