Для создания интерактивных веб-приложений необходимо использовать события 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, но и учитывать размер области клика. Подробнее о том, как помочь пользователю не промахиваться, читайте в статье: «Хотел кликнуть, но не смог: как правильно настроить размер области клика».