JavaScript – Введение в события. Обработчик события
Событие – это определённый сигнал от браузера. Он сообщает нам о том, что что-то произошло.
Например: щелчок мыши, нажатие клавиши на клавиатуре, изменение размера области просмотра, завершение загрузки документа и т.д.
При этом сигнал всегда связан с объектом . Подавать сигналы могут различные объекты: window , document , DOM-элементы и т.д.
Список некоторых событий и их название:
- DOMContentLoaded – завершение загрузки DOM;
- click – клик (нажатие левой кнопки мыши, на устройствах с сенсорным управлением возникает при касании);
- keydown – нажатие клавиши на клавиатуре;
- resize – изменение размеров документа;
- change – окончание изменения значения в поле ввода.
Обработчик события
Зачем нам события? Они нам нужны для того, чтобы мы могли реагировать на них , или другими словами выполнять определённые действия, когда они произойдут.
В JavaScript это выполняется посредством привязывания некоторой функции к событию. После этого эта функция будет вызываться всякий раз, когда это событие на указанном элементе будет возникать. Эту функцию в JavaScript принято называть обработчиком события .
Следует отметить, что на странице постоянно возникает огромное количество событий, независимо от того назначили ли мы им обработчик или нет. Наша задача – это заставить наш сайт или приложение реагировать только на те события, которые нам небезразличны.
Способы задания событию обработчика
Назначить обработчик событию можно разными способами:
- через HTML-атрибут on{событие} (не является хорошей практикой);
- посредством свойства DOM-элемента on{событие} ;
- используя специальный метод addEventListener .
Инициализация обработчика через атрибут
Этот способ позволяет прописать обработчик напрямую в разметке. Выполняется это посредством указания JavaScript кода в атрибуте on{событие} . Вместо {событие} необходимо написать имя (тип) события (например: click ).
Пример, в котором назначим HTML-элементу button обработчик события click , используя атрибут:
Если код, который нужно поместить в атрибут достаточно большой, то в этом случае его лучше оформить в виде функции, а в атрибут поместить её вызов.
В этом примере мы указали в качестве обработчика функцию sum .
При этом задавать обработчик напрямую в разметке не является хорошей практикой, т.к. это приведёт к смешиванию JavaScript и HTML кода.
Добавление обработчика через свойство DOM объекта
Второй способ назначить обработчик — это использовать свойство on{событие} .
Например, привяжем обработчик события click к элементу (для этого события свойство будет onclick ):
В приведённом выше примере обработчик представляет собой анонимную функцию, которая будет выполняться всякий раз, когда это событие на указанном элементе будет происходить.
Другой вариант – это назначить уже существующую функцию.
Внутри обработчика можно обратиться к текущему элементу, т.е. к тому для которого в данный момент был вызван этот обработчик. Осуществляется это с помощью ключевого слова this .
Кстати, когда обработчик задаётся через атрибут, то браузер самостоятельно при чтении такого HTML создаёт из значения этого атрибута функцию и присваивает её одноименному свойству этого элемента.
Т.е., по сути, задание свойства через атрибут – это просто способ инициализации обработчика. Т.к. сам обработчик в этом случае тоже хранится в свойстве DOM-объекта.
Но установка обработчика через свойство имеет недостаток. С помощью него нельзя назначить одному событию несколько обработчиков. Если в коде создадим новый обработчик, то он перезапишет существующий:
Кстати, также не получится назначить несколько обработчиков, один через атрибут, а другой через свойство. Последний перепишет предыдущий.
Подписка на событие через addEventListener
Ещё один способ назначить событию обработчик — это использовать метод addEventListener .
- event — имя события (например, click );
- handler — функция, которая будет вызвана при возникновении этого события;;
- options (не обязательный) — объект, в котором можно задать дополнительные параметры.
В options можно задать:
- once — если true , то обработчик будет вызван всего один раз;
- capture — задаёт фазу, на которой нужно вызвать обработчик события (по умолчанию — на этапе всплытия); если нужно на этапе погружения (перехвата) — то этому ключу следует установить значение true ;
- passive — определяет следует ли вызывать preventDefault() ; если установить true — то обработчик никогда не вызовет этот метод.
Кроме этого, options можно установить true или false , в этом случае он будет просто определять фазу (всплытие или погружение).
В этом примере addEventListener прикреплен к объекту document . Когда событие click возникнет на этом элементе, будет вызвана функция changeBgColor .
Если мы откроем документ, содержащий этот код в браузере, то сначала увидим пустую страницу.
Однако при клике фон страницы изменится с белого на #3f51b5 .
Иногда возникают ситуации, когда нужно удалить обработчик . Это можно выполнить, используя removeEventListener :
Этот метод принимает аргументы тех же типов, что addEventListener .
При этом для того, чтобы удалить обработчик нам нужно указать точно такие же аргументы , которые мы использовали при его назначении.
Если обработчик — анонимная функция, то её удалить нельзя.
Как добавить несколько обработчиков к событию?
Метод addEventListener в отличие от предыдущих способов позволяет назначить одному событию несколько обработчиков:
Как правильно прикрепить обработчики к элементам?
Для прикрепления обработчиков к элементам, необходимо чтобы эти элементы на странице были доступны. Определить, когда они будут доступны с момента загрузки документам можно с помощью события DOMContentLoaded . Данное событие возникает на document когда DOM полностью построено:
Задачи
1. Скрыть элемент по нажатию кнопки с классом spoiler-trigger
Написать JavaScript код, который при нажатии на кнопку spoiler-trigger будет скрывать элемент, расположенный сразу за ней. При этом на странице таких кнопок может быть несколько.
Решение
2. Создать выпадающее меню
Имеется следующая разметка (стили добавлять не нужно, они имеются в примере):
Необходимо написать скрипт, который будет при нажатии на кнопку ( .dropdown__trigger ) переключался класс show у элемента .dropdown :
Решение
Введение в браузерные события
Событие – это сигнал от браузера о том, что что-то произошло. Все DOM-узлы подают такие сигналы (хотя события бывают и не только в DOM).
Вот список самых часто используемых DOM-событий, пока просто для ознакомления:
События мыши:
- click – происходит, когда кликнули на элемент левой кнопкой мыши (на устройствах с сенсорными экранами оно происходит при касании).
- contextmenu – происходит, когда кликнули на элемент правой кнопкой мыши.
- mouseover / mouseout – когда мышь наводится на / покидает элемент.
- mousedown / mouseup – когда нажали / отжали кнопку мыши на элементе.
- mousemove – при движении мыши.
События на элементах управления:
- submit – пользователь отправил форму <form> .
- focus – пользователь фокусируется на элементе, например нажимает на <input> .
Клавиатурные события:
- keydown и keyup – когда пользователь нажимает / отпускает клавишу.
События документа:
- DOMContentLoaded – когда HTML загружен и обработан, DOM документа полностью построен и доступен.
CSS events:
- transitionend – когда CSS-анимация завершена.
Существует множество других событий. Мы подробно разберём их в последующих главах.
Обработчики событий
Событию можно назначить обработчик, то есть функцию, которая сработает, как только событие произошло.
Именно благодаря обработчикам JavaScript-код может реагировать на действия пользователя.
Есть несколько способов назначить событию обработчик. Сейчас мы их рассмотрим, начиная с самого простого.
Использование атрибута HTML
Обработчик может быть назначен прямо в разметке, в атрибуте, который называется on<событие> .
Например, чтобы назначить обработчик события click на элементе input , можно использовать атрибут onclick , вот так:
При клике мышкой на кнопке выполнится код, указанный в атрибуте onclick .
Обратите внимание, для содержимого атрибута onclick используются одинарные кавычки, так как сам атрибут находится в двойных. Если мы забудем об этом и поставим двойные кавычки внутри атрибута, вот так: onclick="alert("Click!")" , код не будет работать.
Атрибут HTML-тега – не самое удобное место для написания большого количества кода, поэтому лучше создать отдельную JavaScript-функцию и вызвать её там.
Следующий пример по клику запускает функцию countRabbits() :
Как мы помним, атрибут HTML-тега не чувствителен к регистру, поэтому ONCLICK будет работать так же, как onClick и onCLICK … Но, как правило, атрибуты пишут в нижнем регистре: onclick .
Использование свойства DOM-объекта
Можно назначать обработчик, используя свойство DOM-элемента on<событие> .
К примеру, elem.onclick :
Если обработчик задан через атрибут, то браузер читает HTML-разметку, создаёт новую функцию из содержимого атрибута и записывает в свойство.
Этот способ, по сути, аналогичен предыдущему.
Обработчик всегда хранится в свойстве DOM-объекта, а атрибут – лишь один из способов его инициализации.
Эти два примера кода работают одинаково:
Так как у элемента DOM может быть только одно свойство с именем onclick , то назначить более одного обработчика так нельзя.
В примере ниже назначение через JavaScript перезапишет обработчик из атрибута:
Кстати, обработчиком можно назначить и уже существующую функцию:
Убрать обработчик можно назначением elem.onclick = null .
Доступ к элементу через this
Внутри обработчика события this ссылается на текущий элемент, то есть на тот, на котором, как говорят, «висит» (т.е. назначен) обработчик.
В коде ниже button выводит своё содержимое, используя this.innerHTML :
Частые ошибки
Если вы только начинаете работать с событиями, обратите внимание на следующие моменты.
Функция должна быть присвоена как sayThanks , а не sayThanks() .
Если добавить скобки, то sayThanks() – это уже вызов функции, результат которого (равный undefined , так как функция ничего не возвращает) будет присвоен onclick . Так что это не будет работать.
…А вот в разметке, в отличие от свойства, скобки нужны:
Это различие просто объяснить. При создании обработчика браузером из атрибута, он автоматически создаёт функцию с телом из значения атрибута: sayThanks() .
Так что разметка генерирует такое свойство:
Используйте именно функции, а не строки.
Назначение обработчика строкой elem.onclick = "alert(1)" также сработает. Это сделано из соображений совместимости, но делать так не рекомендуется.
Не используйте setAttribute для обработчиков.
Такой вызов работать не будет:
Регистр DOM-свойства имеет значение.
Используйте elem.onclick , а не elem.ONCLICK , потому что DOM-свойства чувствительны к регистру.
addEventListener
Фундаментальный недостаток описанных выше способов назначения обработчика – невозможность повесить несколько обработчиков на одно событие.
Например, одна часть кода хочет при клике на кнопку делать её подсвеченной, а другая – выдавать сообщение.
Мы хотим назначить два обработчика для этого. Но новое DOM-свойство перезапишет предыдущее:
Разработчики стандартов достаточно давно это поняли и предложили альтернативный способ назначения обработчиков при помощи специальных методов addEventListener и removeEventListener . Они свободны от указанного недостатка.
Синтаксис добавления обработчика:
- once : если true , тогда обработчик будет автоматически удалён после выполнения.
- capture : фаза, на которой должен сработать обработчик, подробнее об этом будет рассказано в главе Всплытие и погружение. Так исторически сложилось, что options может быть false/true , это то же самое, что
- passive : если true , то указывает, что обработчик никогда не вызовет preventDefault() , подробнее об этом будет рассказано в главе Действия браузера по умолчанию.
Для удаления обработчика следует использовать removeEventListener :
Для удаления нужно передать именно ту функцию-обработчик которая была назначена.
Вот так не сработает:
Обработчик не будет удалён, т.к. в removeEventListener передана не та же функция, а другая, с одинаковым кодом, но это не важно.
Вот так правильно:
Обратим внимание – если функцию обработчик не сохранить где-либо, мы не сможем её удалить. Нет метода, который позволяет получить из элемента обработчики событий, назначенные через addEventListener .
Метод addEventListener позволяет добавлять несколько обработчиков на одно событие одного элемента, например:
Как видно из примера выше, можно одновременно назначать обработчики и через DOM-свойство и через addEventListener . Однако, во избежание путаницы, рекомендуется выбрать один способ.
Существуют события, которые нельзя назначить через DOM-свойство, но можно через addEventListener .
Например, таково событие DOMContentLoaded , которое срабатывает, когда завершена загрузка и построение DOM документа.
Так что addEventListener более универсален. Хотя заметим, что таких событий меньшинство, это скорее исключение, чем правило.
Объект события
Чтобы хорошо обработать событие, могут понадобиться детали того, что произошло. Не просто «клик» или «нажатие клавиши», а также – какие координаты указателя мыши, какая клавиша нажата и так далее.
Когда происходит событие, браузер создаёт объект события, записывает в него детали и передаёт его в качестве аргумента функции-обработчику.
Пример ниже демонстрирует получение координат мыши из объекта события:
Некоторые свойства объекта event :
event.type Тип события, в данном случае "click" . event.currentTarget Элемент, на котором сработал обработчик. Значение – обычно такое же, как и у this , но если обработчик является функцией-стрелкой или при помощи bind привязан другой объект в качестве this , то мы можем получить элемент из event.currentTarget . event.clientX / event.clientY Координаты курсора в момент клика относительно окна, для событий мыши.
Есть также и ряд других свойств, в зависимости от типа событий, которые мы разберём в дальнейших главах.
При назначении обработчика в HTML, тоже можно использовать объект event , вот так:
Это возможно потому, что когда браузер из атрибута создаёт функцию-обработчик, то она выглядит так: function(event) < alert(event.type) >. То есть, её первый аргумент называется "event" , а тело взято из атрибута.
Объект-обработчик: handleEvent
Мы можем назначить обработчиком не только функцию, но и объект при помощи addEventListener . В этом случае, когда происходит событие, вызывается метод объекта handleEvent .
Как видим, если addEventListener получает объект в качестве обработчика, он вызывает object.handleEvent(event) , когда происходит событие.
Мы также можем использовать класс для этого:
Здесь один и тот же объект обрабатывает оба события. Обратите внимание, мы должны явно назначить оба обработчика через addEventListener . Тогда объект menu будет получать события mousedown и mouseup , но не другие (не назначенные) типы событий.
Метод handleEvent не обязательно должен выполнять всю работу сам. Он может вызывать другие методы, которые заточены под обработку конкретных типов событий, вот так:
Теперь обработка событий разделена по методам, что упрощает поддержку кода.
Итого
Есть три способа назначения обработчиков событий:
- Атрибут HTML: onclick=". " .
- DOM-свойство: elem.onclick = function .
- Специальные методы: elem.addEventListener(event, handler[, phase]) для добавления, removeEventListener для удаления.
HTML-атрибуты используются редко потому, что JavaScript в HTML-теге выглядит немного странно. К тому же много кода там не напишешь.
DOM-свойства вполне можно использовать, но мы не можем назначить больше одного обработчика на один тип события. Во многих случаях с этим ограничением можно мириться.
Последний способ самый гибкий, однако нужно писать больше всего кода. Есть несколько типов событий, которые работают только через него, к примеру transitionend и DOMContentLoaded . Также addEventListener поддерживает объекты в качестве обработчиков событий. В этом случае вызывается метод объекта handleEvent .
Не важно, как вы назначаете обработчик – он получает объект события первым аргументом. Этот объект содержит подробности о том, что произошло.
addEventListener()
Метод addEventListener — это самый функциональный способ позволяющий добавить обработчик события к указанному элементу и запустить выполнение программы при совершении заданного действия. Получить информацию о сигналах браузера можно из Document (DOM), Element , Window и других объектов поддерживающих события.
addEventListener() является одних из трёх способом прослушивать события, наряду с добавление атрибута к тегам в HTML и обращения к свойствам объекта напрямую.
addEventListener() имеет важное преимущество перед остальными способами, метод позволяет навесить несколько обработчиков на одно событие. Это происходит из-за того, что у объекта только одно свойство, например с именем onclick (клик) или mousemove (движение мыши) и если обратиться к одному из них напрямую несколько раз, второй обработчик перезапишет первый.
В примере выше, как раз можно наблюдать описанный эффект — модальное окно с Да будет так! появится, а вот Терпение и труд всё перетрут нет.
Также отследить некоторые события можно только с помощью addEventListener() , например навесить обработчик на DOMContentLoaded по другому не получиться.
Синтаксис
element — объект, действие по которому отслеживаем.
eventType — тип события, которое мы хотим отследить: клик, прокрутка мыши, нажатие клавиши и т.д. Написание чувствительно к регистру: click правильно, Click или CLICK неправильно.
handler — имя функции или сама функция, которая будет выполнена после наступления события.
options — необязательный объект со свойствами, внутри которого доступны следующие параметры:
- capture : значение записывается в формате true или false и задает этап, на котором будет обработано событие. По умолчанию false — на этапе всплытия, true — на этапе погружения (перехват). Если вместо options задать булево значение — это будет равносильно
- once : значение типа boolean , по умолчанию false , если true тогда обработчик будет удален после выполнения.
- passive : по умолчанию false , если true обработчик никогда не вызовет preventDefault() , взамен этого будет сгенерировано предупреждение в console.
При клике на кнопку мы получим модальное окно с сообщением, если кликнуть второй раз ничего не произойдет, так как свойство once равно true — после события обработчик удаляется.
removeEventListener()
Удалить обработчик события можно также с помощью метода removeEventListener() . В этом случае появляется возможность сделать это когда нам удобно. Для того, чтобы все сработало, первые два параметра у обоих методов должны быть идентичными. Важно также передать в removeEventListener() именно название функции, с анонимными функциями ничего не получиться, даже если записать код точь в точь.
В этом случае, если поменять текст на кнопке обработчик удален не будет.
Объект события
Для более детального представления о том какие действия происходят на странице используют объект события, который создается браузером после совершения действия. Такой объект записывается в качестве первого аргумента функции обработчика, для названия принято использовать event . Это позволяет гибко настраивать отслеживание получая информацию о том какая клавиша была нажата, координаты указателя мыши и другое.
Популярные события
Рассмотрим события, которые отслеживаются чаще других:
click — клик левой кнопкой мыши по элементу, на сенсорных устройствах это касание;
contextmenu — клик на элемент правой кнопкой мыши — вызов контекстного меню;
mouseover / mouseout — наведение на элемент курсора мыши / курсор покидает элемент;
mousemove — движение мыши;
keydown / keyup — клавиша нажата / клавиша отпущена;
DOMContentLoaded — весь HTML загружен, а DOM-дерево построено.
Для того, чтобы посмотреть все возможные события для DOM-элемента, нажмите правой кнопкой на страницу, далее Просмотреть код, выберите элемент на странице, а далее кликните на Свойства (Properties). В фильтре наберите on, все что начинает на on являются событиями.
Как добавить обработчик на множество элементом
addEventListener и forEach
В данном примере мы получили все элементы с классом myChoice в объект через querySelectorAll() , а потом с помощью forEach() перебором назначили обработчик события на все кнопки.
Делегирование событий
Вторым и более удачным способом отслеживать события на множестве элементов это делегирование.
В этом примере мы назначаем обработчик для родителя в котором содержатся интересующие нас элементы. Далее отслеживаем с помощью event.target.closest(‘.hideText’) было ли взаимодействие с тегом с классом .hideText и если это так удаляем оттуда класс, который делает текст белым.
Всплытие и погружение
Всплытие — это когда обработчик сначала срабатывает на элементе с которым произошло взаимодействие, затем событие обрабатывается на его родителе и далее выше по цепочке.
Погружение — при взаимодействии с объектом, который находится ниже чем элемент со свойством capture: true , сначала событие будет обработано на последнем, далее обработчик сработает на всех потомках и только потом на всех родителях.
Для того, чтобы понять тему потренируйтесь на примере, наблюдая последовательность выполнения действий при клике на различные элементы. Результат отслеживайте в console.
Пример с квадратами
Получаем доступ к элементу через this
Для того, чтобы получить доступ к элементу на котором висит обработчик, в функции можно использовать this .
Итого
Обработчик события это важный элемент в JavaScript, именно с помощью него можно отслеживать действия пользователя на странице. В свою очередь метод addEventListener() является основным способом для назначения таких обработчиков объектам.
Удалить обработчик события после использования можно двумя способами: с помощью свойства once со значением true или метода removeEventListener() .
Для того, чтобы получить более подробную информацию о событии используют объект события, который передается первым аргументом в функцию. Отсюда можно получить координаты клика, какая кнопка была нажата и многое другое.
Для того, чтобы назначить обработчик множеству элементов используют принцип делегирования — событие фиксируется не только на элементе которому был назначен обработчик, но и на всех вложенных. Второй способ — это навешивание обработчиков через цикл forEach() .
How to add click event to an element?
I would like to add a click event in plain JavaScript (without using jQuery) to an element like this, so I don’t have an id but a class:
4 Answers 4
If you don’t have an id and don’t have any selector library and you want it to work in older browsers, then it takes a bit more work. If you can put an id on it, it’s quite simple. If not, it takes more code:
Since getElementsByClassName is not universally available in older browsers, you would need a shim to implement it when not present. Or, you could get all the links in your document with:
and then cycle through that list until you find the one you want (perhaps checking the class name).
If you can put an ID on the link:
Then, it just takes this code:
If you’re going to do this regularly, the adding an event listener is a little more extensible than using the onclick property, but if you don’t have any framework, then you need a function for adding an event listener that handles older versions of IE.