Частые ошибки

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

Функция должна быть присвоена как sayThanks, а не sayThanks().

Если добавить скобки, то sayThanks() – это уже вызов функции, результат которого (равный undefined, так как функция ничего не возвращает) будет присвоен onclick. Так что это не будет работать.

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

Используйте именно функции, а не строки.

Назначение обработчика строкой elem.onclick = "alert(1)" также сработает. Это сделано из соображений совместимости, но делать так не рекомендуется.

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

Не используйте setAttribute для обработчиков

Такой вызов работать не будет, т.к. setAttribute приводит все в строковый тип.

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

Регистр DOM-свойства имеет значение

Используйте elem.onclick, а не elem.ONCLICK, потому что DOM-свойства чувствительны к регистру.

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

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 не сработает.

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