Как создать объект для обработки событий в JavaScript?
Чтобы создавать интерактивные веб-приложения нужно использовать события JavaScript. Как они работают?
4К открытий4К показов
Чтобы создавать интерактивные веб-приложения нужно использовать события JavaScript. Как они работают?
Вы указываете нужный тип события, добавляете коллбэк, и теперь можете обрабатывать клики, нажатия клавиш, прокрутку и другие события.
Например, чтобы обработать нажатие кнопки, можно использовать следующий код:
Этот код обращается к DOM, находит указанный элемент, и добавляет обработчик события click используя addEventListener.
В соответствии с документацией DOM, target.addEventListener может иметь следующие параметры:
addEventListener принимает: тип события, коллбэк и параметр options/useCapture. Подробнее о возможных значениях параметров в документации событий JavaScript.
Параметр listener может быть не только функцией но и объектом.
Обработка событий JavaScript с помощью addEventListener и EventListener
MDN описывает listener так:
listener может быть объектом реализующим интерфейс EventListener или JavaScript функцией
В ранней версии спецификации событий DOM (до HTML5), описан интерфейс EventListener. Реализующие его объекты должны содержать метод handeEvent. Они могут использоваться с addEventListener.
Это код класса EventHandler. Инициализированные объекты обработчиков событий могут быть переданы в addEventListener. Обработчик считает количество событий нужного типа. Попробуйте этот код на CodePen. Вся информация хранится в самом объекте и код работает без внешних переменных. Мне нравится этот паттерн, он пригодится для работы с последовательными событиями.
MDN говорит, что интерфейс EventListener поддерживается большинством браузеров и вы можете безопасно передавать реализующие его объекты в addEventListener. Когда их нужно передавать? Объясню на примере:
Конструктор класса MyComponent принимает элемент DOM в качестве аргумента и сам добавляет\удаляет его обработчики событий JavaScript. Класс реализует интерфейс EventListener, а следовательно вы можете передавать this в addEventListener.
Для того чтобы ваш интерфейс был удобным и интерактивным, важно не только использовать события JavaScript, но и учитывать размер области нажатия. Подробнее о том, как помочь юзеру не промахнуться, читайте в статье: «Хотел кликнуть, но не смог: как правильно настроить размер области клика».
4К открытий4К показов