addEventListener

Метод EventTarget.addEventListener() регистрирует определённый обработчик события, вызванного на EventTarget.

Данный метод позволяет "вешать" несколько обработчиков одного и того же события на один элемент. Именно благодаря этому является более предпочтительным вариантом обработки событий.

#браузер #документ #события

Свойство «hidden»

Атрибут и DOM-свойство «hidden» указывает на то, видим ли мы элемент или нет.
Мы можем использовать его в HTML или назначать при помощи JavaScript, как в примере ниже (см. пример выше на картинке).

Технически, hidden работает так же, как style="display:none". Но его применение проще.

#браузер #документ #свойства_узлов

removeEventListener

Удаляет обработчик события, который был зарегистрирован при помощи EventTarget.addEventListener(). Обработчик определяется типом события, самой функцией обработки события, и дополнительными параметрами, переданными при регистрации обработчика.

#браузер #документ #события

Удаление требует именно ту же функцию

Для удаления нужно передать именно ту функцию-обработчик которая была назначена.

Первый вариант не сработает, т.к. в removeEventListener передана не та же функция, а другая, с одинаковым кодом, но это не важно.

Обратим внимание – если функцию обработчик не сохранить где-либо, мы не сможем её удалить. Нет метода, который позволяет получить из элемента обработчики событий, назначенные через addEventListener.

#браузер #документ #события

Обработчики некоторых событий можно назначать только через addEventListener

Существуют события, которые нельзя назначить через DOM-свойство, но можно через addEventListener.

Например, таково событие DOMContentLoaded, которое срабатывает, когда завершена загрузка и построение DOM документа.

Так что addEventListener более универсален. Хотя заметим, что таких событий меньшинство, это скорее исключение, чем правило.

#браузер #документ #события

Объект события

Чтобы хорошо обработать событие, могут понадобиться детали того, что произошло. Не просто «клик» или «нажатие клавиши», а также – какие координаты указателя мыши, какая клавиша нажата и так далее.

Когда происходит событие, браузер создаёт объект события, записывает в него детали и передаёт его в качестве аргумента функции-обработчику.

Пример выше демонстрирует получение координат мыши из объекта события.

#браузер #документ #события

Основные свойства объекта event

event.type — тип события, в данном случае "click".

event.currentTarget — элемент, на котором сработал обработчик. Значение – обычно такое же, как и у this, но если обработчик является функцией-стрелкой или при помощи bind привязан другой объект в качестве this, то мы можем получить элемент из event.currentTarget.

event.clientX / event.clientY — координаты курсора в момент клика относительно окна, для событий мыши.

#браузер #документ #события

Объект события доступен и в HTML

При назначении обработчика в HTML, тоже можно использовать объект event.

Это возможно потому, что когда браузер из атрибута создаёт функцию-обработчик, то она выглядит так: f
unction(event) { alert(event.type) }.

То есть, её первый аргумент называется "event", а тело взято из атрибута.

#браузер #документ #события

Объект-обработчик: handleEvent

Мы можем назначить обработчиком не только функцию, но и объект при помощи addEventListener. В этом случае, когда происходит событие, вызывается метод объекта handleEvent.

#браузер #документ #события

Можно использовать класс для обработки событий

Как видим, если addEventListener получает класс в качестве обработчика, он вызывает menu.handleEvent(event), когда происходит событие.

Здесь один и тот же объект обрабатывает оба события. Обратите внимание, мы должны явно назначить оба обработчика через addEventListener. Тогда объект menu будет получать события mousedown и mouseup, но не другие (не назначенные) типы событий.

#браузер #документ #события

Декомпозиция процесса обработки событий

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

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

#браузер #документ #события

textContent: просто текст

Свойство textContent предоставляет доступ к тексту внутри элемента за вычетом всех <тегов> (см. пример на картинке выше).

Как мы видим, возвращается только текст, как если бы все <теги> были вырезаны, но текст в них остался.
На практике редко появляется необходимость читать текст таким образом.

Намного полезнее возможность записывать текст в textContent, т.к. позволяет писать текст «безопасным способом».

#браузер #документ #свойства_узлов

Пример всплытия

Этот обработчик для <div> сработает, если вы кликните по любому из вложенных тегов, будь то <em> или <code>.

#браузер #документ #всплытие

Всплытие

Принцип всплытия очень простой.

Когда на элементе происходит событие, обработчики сначала срабатывают на нём, потом на его родителе, затем выше и так далее, вверх по цепочке предков.

Например, есть 3 вложенных элемента FORM > DIV > P с обработчиком на каждом.

Клик по внутреннему <p> вызовет обработчик onclick:
- Сначала на самом <p>.
- Потом на внешнем <div>.
- Затем на внешнем <form>.
- И так далее вверх по цепочке до самого document.

Поэтому если кликнуть на <p>, то мы увидим три оповещения: p → div → form.

Этот процесс называется «всплытием», потому что события «всплывают» от внутреннего элемента вверх через родителей подобно тому, как всплывает пузырёк воздуха в воде.

#браузер #документ #всплытие

Почти все события всплывают.

Ключевое слово в этой фразе – «почти».

Например, событие focus не всплывает. В дальнейшем мы увидим и другие примеры. Однако, стоит понимать, что это скорее исключение, чем правило, всё-таки большинство событий всплывают.

#браузер #документ #всплытие

Свойство event.target

Всегда можно узнать, на каком конкретно элементе произошло событие.

Самый глубокий элемент, который вызывает событие, называется целевым элементом, и он доступен через event.target.

Отличия от this (=event.currentTarget):
- event.target – это «целевой» элемент, на котором произошло событие, в процессе всплытия он неизменен.
- this – это «текущий» элемент, до которого дошло всплытие, на нём сейчас выполняется обработчик.

Например, если стоит только один обработчик form.onclick, то он «поймает» все клики внутри формы. Где бы ни был клик внутри – он всплывёт до элемента <form>, на котором сработает обработчик.

При этом внутри обработчика form.onclick:
- this (=event.currentTarget) всегда будет элемент <form>, так как обработчик сработал на ней.
- event.target будет содержать ссылку на конкретный элемент внутри формы, на котором произошёл клик.

#браузер #документ #всплытие

Прекращение всплытия

Всплытие идёт с «целевого» элемента прямо наверх. По умолчанию событие будет всплывать до элемента <html>, а затем до объекта document, а иногда даже до window, вызывая все обработчики на своём пути.

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

Для этого нужно вызвать метод event.stopPropagation().

Например, здесь (см. картинку) при клике на кнопку <button> обработчик body.onclick не сработает.

#браузер #документ #всплытие

Не очень комфортно заниматься сексом, когда твой телефон прослушивает Google 🤷

Или писать личную СМСку, когда каждое слово видит клавиатурный шпион.

Приватности больше нет. Крупные поисковики в открытую залазят к нам в трусы ради прибыли, и только 5-10% пользователей знают, как этому противопостоять.

Для тех, кому не наплевать на свою безопасность в сети, есть канал «Отдел К».

Как понять, что ваш смартфон хотели взломать? Какие 3 настройки отключить, чтобы избавиться от прослушки? Как по любому сообщению узнать точное гео собеседника?

Осторожно, после подписки вам захочется удалить все соцсети: @cyber_cab

event.stopImmediatePropagation()

Если у элемента есть несколько обработчиков на одно событие, то даже при прекращении всплытия все они будут выполнены.

То есть, event.stopPropagation() препятствует продвижению события дальше, но на текущем элементе все обработчики будут вызваны.

Для того, чтобы полностью остановить обработку, существует метод event.stopImmediatePropagation(). Он не только предотвращает всплытие, но и останавливает обработку событий на текущем элементе.

#браузер #документ #всплытие

Не прекращайте всплытие без необходимости!

Всплытие – это удобно. Не прекращайте его без явной нужды, очевидной и архитектурно прозрачной.

Зачастую прекращение всплытия через event.stopPropagation() имеет свои подводные камни, которые со временем могут стать проблемами.

Например:
1) Мы делаем вложенное меню. Каждое подменю обрабатывает клики на своих элементах и делает для них stopPropagation, чтобы не срабатывало внешнее меню.
2) Позже мы решили отслеживать все клики в окне для какой-то своей функциональности, к примеру, для статистики – где вообще у нас кликают люди. Некоторые системы аналитики так делают. Обычно используют document.addEventListener('click'…), чтобы отлавливать все клики.
3) Наша аналитика не будет работать над областью, где клики прекращаются stopPropagation. Увы, получилась «мёртвая зона».

#браузер #документ #всплытие

Погружение

Существует ещё одна фаза из жизненного цикла события – «погружение» (иногда её называют «перехват»).
Она очень редко используется в реальном коде, однако тоже может быть полезной.

Стандарт DOM Events описывает 3 фазы прохода события:
1) Фаза погружения (capturing phase) – событие сначала идёт сверху вниз.
2) Фаза цели (target phase) – событие достигло целевого(исходного) элемента.
3) Фаза всплытия (bubbling stage) – событие начинает всплывать.

Картинка из спецификации демонстрирует, как это работает при клике по ячейке <td>, расположенной внутри таблицы.

То есть при клике на <td> событие путешествует по цепочке родителей сначала вниз к элементу (погружается), затем оно достигает целевой элемент (фаза цели), а потом идёт наверх (всплытие), вызывая по пути обработчики.

#браузер #документ #погружение