Для создания интерактивных веб-приложений необходимо использовать события JavaScript. Как они работают?
Вы указываете нужный тип события, добавляете обратный вызов, и теперь вы можете обрабатывать клики, нажатия клавиш, прокрутку и другие события.
Например, для обработки нажатия кнопки можно использовать следующий код:
the document.querySelector ('button') .addEventListener ('click', () = > { console. log ('button pressed'); });
Этот код обращается к DOM, находит указанный элемент и добавляет обработчик события клика с помощью addEventListener.
Согласно документации DOM, target.addEventListener может иметь следующие параметры:
target.addEventListener(type, listener [, options]); target.addEventListener(type, listener [, useCapture]); target.addEventListener(type, listener [, useCapture, wantsUntrusted ]); // only in Gecko/Mozilla browsers
addEventListener принимает: тип события, обратный вызов и параметр options/useCapture. Дополнительные сведения о возможных значениях параметров см. в документации по событиям JavaScript.
Параметр прослушивателя может быть как объектом, так и функцией.
Обработка событий JavaScript с помощью addEventListener и EventListener
MDN описывает слушателя следующим образом:
прослушиватель может быть объектом, реализующим интерфейс EventListener или функцию JavaScript
В более ранней версии спецификации событий DOM (до HTML5) описан интерфейс EventListener. Объекты, которые его реализуют, должны содержать метод handeEvent. Их можно использовать с addEventListener.
// class that implements / / the `EventListener`interface EventHandler class { constructor () { this.eventCount = 0; } handleEvent() { this.eventCount++; console. log ('Event handled by $ {this. eventCount} times`); } } the document.querySelector ('button') . addEventListener ('click', new EventHandler());
Это код класса EventHandler. Инициализированные объекты обработчика событий могут быть переданы в addEventListener. Обработчик подсчитывает количество событий нужного типа. Попробуйте этот код на CodePen. Вся информация хранится в самом объекте и код работает без внешних переменных. Мне нравится этот паттерн, он полезен для работы с последовательными событиями.
MDN говорит, что интерфейс EventListener поддерживается большинством браузеров, и вы можете безопасно передавать реализующие его объекты в addEventListener.
Когда они должны быть переведены? Поясним на примере:
class MyComponent { constructor (el) { this.el = el this.el.addEventListener('click', this) } handleEvent (event) { console.log('my component element is clicked') } destroy () { this.el.removeEventListener('click', this) } } const component = new MyComponent( document.querySelector('button') );
Конструктор класса MyComponent принимает элемент DOM в качестве аргумента и сам добавляет/удаляет свои обработчики событий JavaScript. Класс реализует интерфейс EventListener, поэтому вы можете передать его в addEventListener.
Вывод
Чтобы ваш интерфейс был удобным и интерактивным, важно не только использовать события JavaScript, но и учитывать размер области клика. Подробнее о том, как помочь пользователю не промахиваться, читайте в статье: «Хотел кликнуть, но не смог: как правильно настроить размер области клика».