Счастливого Рождества!

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

Прослушиватель событий – это функция с явным именем, если ее можно повторно использовать, или анонимная функция, если она используется один раз.

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

Существует три способа назначения обработчиков событий.

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

Обработчики событий обычно имеют имена, начинающиеся с on, например, обработчиком события click событие является onclick.

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

В этом случае при нажатии кнопки отображается окно предупреждения.

Когда вы назначаете код JavaScript в качестве значения атрибута onclick , вам необходимо экранировать символы HTML, такие как амперсанд (&), >двойные кавычки ('), меньше чем (‹) и т. д., иначе вы получите синтаксическую ошибку.

Обработчик событий, определенный в HTML, может вызывать функцию, определенную в сценарии. Например:

В этом примере кнопка вызывает функцию showAlert() при нажатии.

Функция showAlert() определена в отдельном элементе ‹script› и может быть помещена во внешний файл JavaScript.

Важные примечания

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

Во-первых, код в обработчике событий может получить доступ к объекту события, не определяя его явно:

Во-вторых, это значение внутри обработчика событий эквивалентно целевому элементу события:

В-третьих, обработчик событий может получить доступ к свойствам элемента, например:

Недостатки использования атрибутов обработчика событий HTML.

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

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

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

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

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

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

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

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

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

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

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

Спасибо за прочтение.