Программное вызов событий JavaScript: addEventListener

Быстрый ответ

Для имитации события в JavaScript применяется метод dispatchEvent:

let button = document.getElementById('myButton');
// 🎯 Имитируем клик по кнопке!
button.dispatchEvent(new Event('click'));

Этот код инициирует событие click на кнопке с id='myButton', как если бы она была нажата пользователем.

Детальное рассмотрение иницирования событий

Процесс инициализации обычного события достаточно прост, однако создание событий с параметрами или гарантирование кроссбраузерности требует более глубоких знаний. Давайте разберёмся подробнее.

CustomEvent для передачи дополнительных данных

Если требуется передать данные через событие, используйте CustomEvent со свойством detail:

// Гарри Поттер отправляет письмо по сове 🦉
let customEvent = new CustomEvent('owlPost', { detail: { message: 'Привет, Хогвартс!' } });
button.dispatchEvent(customEvent);

Подробнее об этом расскажет наш спикер на видео

Совместимость с различными браузерами

Несмотря на то, что CustomEvent поддерживается большинством браузеров, для устаревших версий могут понадобиться полифилы. Ранее применялись методы document.createEvent и initEvent:

// Почувствуйте нотку ностальгии. Эти строки были актуальны 10 лет назад.
var oldEvent = document.createEvent('Event');
oldEvent.initEvent('vintage', true, true);
button.dispatchEvent(oldEvent);

Для Internet Explorer 8 и более ранних версий следует использовать методы createEventObject и fireEvent:

// Приветствие от Microsoft
var ieEvent = document.createEventObject();
ieEvent.eventType = 'history';
button.fireEvent('on' + ieEvent.eventType, ieEvent);

Обработчики событий: новые и старые браузеры

Сегодняшний подход к привязке обработчиков событий – это использование addEventListener. Однако для IE8 и более старых версий необходимо использовать attachEvent:

// Мы возвращаемся в прошлое! ✨
if(button.addEventListener){
  button.addEventListener('click', handlerFunction);
} else if(button.attachEvent){
  button.attachEvent('onclick', handlerFunction);
}

Целостность событий

Инициируя события, следите, чтобы они не нарушали стандартное поведение элемента и были совместимы с типами событий.

Не только DOM-события

Мы обсудили детали DOM-событий, однако следует упомянуть и другие механизмы, например паттерны Observer и Publish/Subscribe.

Визуализация

Визуализируем процесс инициации события в JavaScript через метафору с дверной звонком, который приводит к отклику:

Ваш скрипт (🤖): *Коснулся дверного звонка (🔔)...*

Инициация события:

document.getElementById('doorbell').dispatchEvent(new Event('ring'));

Реакция "дома" DOM (🏠):

Дверной звонок (🔔): *Дин-донг!* Есть кто-нибудь дома!
Обработчик событий (👂): Услышав звонок, открывает дверь для ответа на сигнал!

Так DOM реагирует на события, выполняя соответствующие функции.

Прощай, jQuery, здравствуй нативный JavaScript!

Пользователи jQuery могут инициировать событие с помощью .trigger():

// Как просто
$('#myButton').trigger('click');

Но важно понимать нативный JavaScript аналог, особенно для более высокой производительности и независимости от внешних библиотек. Ресурсы, такие как "You Might Not Need jQuery", могут быть полезными для поиска решений.

Практическое применение инициирования событий

Если нужно инициировать событие изменения на элементе ввода для синхронизации состояния в компоненте React или другом фреймворке:

let input = document.getElementById('myInput');
input.value = 'новое значение'; // Значение изменили, отлично!
input.dispatchEvent(new Event('change', { bubbles: true })); // Заставим всех узнать об этом 📢

Устанавливая опцию bubbles: true вы позволяете событию распространяться вверх по DOM-дереву.

Полезные материалы

1. EventTarget: метод dispatchEvent() – Веб API | MDN — Подробное обсуждение сложностей инициации событий в JavaScript на MDN.
2. Изучение шаблонов проектирования JavaScript — Важная работа о шаблонах проектирования JavaScript, сосредоточенная на событиях.
3. Как создать пользовательские события в JavaScript — SitePoint — Глубоко проникающее руководство с примерами создания пользовательских событий.
4. Как инициировать событие click в JavaScript – Stack Overflow — Советы от сообщества разработчиков о применении кликовых событий.
5. Flavio Copes — Урок по инициированию события в чистом JavaScript с практическими примерами.
6. Справочник событий | MDN — Список браузерных событий в JavaScript.
7. Введение в события браузера — Гид для начинающих в изучении браузерных событий в JavaScript.