Как использование нативных и пользовательских событий в ваших программах помогает упростить и модульизировать.

События — один из самых важных инструментов в вашем наборе инструментов для разработки JS-разработчика. Всякий раз, когда вы хотите, чтобы ваш скрипт реагировал на любое взаимодействие пользователя со страницей — прокрутку, щелчок мышью, нажатие кнопки «Назад» и т. д., вы обычно пишете в свой скрипт «прослушиватель событий». В vanilla JS это будет примерно так:

document.addEventListener(‘mousedown’, () => {
    alert('you just clicked something');
})

В приведенном выше фрагменте кода вы добавляете прослушиватель событий на узел самого высокого уровня в дереве DOM: узел document. Все элементы в DOM являются потомками этого узла. Если вы не слишком много знаете о концепции узлов, я рекомендую эту вводную статью от MDN.

Разделение с событиями

События прекрасны, потому что они реализуют программный шаблон pub-sub. Pub sub означает публикация, подписка, и это один из проверенных и верных методов отделения двух программных систем от другой.

В случае событий Javascript две системы, которые отделяются друг от друга, — это DOM и программа Javascript, которую вы написали как разработчик.

Пока у вашего скрипта есть доступ к методам DOM браузера (что всегда есть), вы сможете добавить слушателя к любому из узлов в DOM и наблюдать за этим событием. ВСЕ ваши сценарии будут иметь одинаковый опыт. Когда прокрутка срабатывает даже в браузере, могут срабатывать события из множества разрозненных сценариев. Это действительно ценно, потому что само событие полностью отделено от методов прослушивателя, которые могут на него реагировать.

Пользовательские события

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

Вы создаете собственное событие следующим образом:

const event = new CustomEvent('dropdownSelect');

Затем вам нужно отправить событие, которое установит всплывающее событие в DOM:

dispatchEvent(event);

После этого вы сможете прослушивать событие в любом месте DOM:

document.addEventListener('dropDownSelect', () => { 
    // this is where you can react to that event
    reactToTheDropdownChangeEvent();
});

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

Вы, конечно, захотите отправить информацию вместе с событием. Это можно обработать так:

const event = new CustomEvent('componentClickable', { detail: Date.now() });

Это позволит вам получить доступ к дополнительным данным в прослушивателе событий:

function eventHandler(e) {
  console.log('The component took ${e.detail} seconds to load');
}

Подключившись к этому DOM API, вы сможете уменьшить зависимости между вашими сценариями и более полно модульизовать свои сценарии. Вместо того, чтобы иметь функцию внутри вашего языкового переключателя, в которой зарегистрированы 15 обратных вызовов, вы можете создать одно событие с именем «languageToggle», которое имеет 15 разных слушателей в 15 разных сценариях. Это помогает поддерживать чистоту и модульность кода.

Удачного кодирования,

~ Алекс Зито-Вольф