Addeventlistener js что это

Обработчики Событий в JS (как работает addEventListener)

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

Любой DOM элемент запускает событие, когда мы с ним как-то взаимодействуем (кликаем, наводим мышь и др.). Обработчики событий в JS используются для того, чтобы реагировать на эти события.

Обработчики событий можно «вешать» на любые элементы DOM (Data Object Model) дерева, а также глобальные объекты window и document.

Предположим, на нашей странице есть html элемент button с классом «btn»:

Давайте выделим наш элемент button и присвоим его переменной button:

Таким образом, каждый раз после срабатывания события «click» будет запускаться наша коллбэк функция и мы будем получать строку «click» в нашей консоли.

Обработчики событий JS (выносим логику коллбэк функции за пределы метода addEventListener)

Мы также можем вынести нашу коллбэк функцию за пределы метода addEventListener, а внутри обработчика событий просто ссылаться на нее:

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

Как снять обработчик события addEventListener с элемента?

Чтобы снять обработчик события с какого-либо элемента, нужно использовать метод removeEventListener. В качестве аргументов нужно указать не только название события («click»), но и название коллбэк функции, которая привязана к элементу.

Метод removeEventListener не сработает, если в качестве коллбэк функции использовать безымянную функцию, так как будет отсутствовать возможность сослаться на нее.

Обработка событий на нескольких DOM элементах

Как использовать обработчик событий addEventListener, когда нам требуется использовать его сразу на нескольких элементах?

Предположим, на нашей странице есть 5 кнопок с классом «btn»:

Подход 1. Используем отдельный addEventListener для каждой кнопки

Подход 2. Делегирование события (Event delegation)

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

Это возможно благодаря механизму, который называется «всплытие» (bubbling) в Javascript, который означает, что если событие срабатывает на каком-то элементе, оно также срабатывает на всех его родительских элементах.

Внутри нашей коллбэк функции у нас есть доступ к объекту «Событие» (Event), внутри которого мы можем использовать свойство target, чтобы получить элемент, на который мы кликнули.

Прототипное наследование Javascript (+ видео с примером)

Поднятие в JS (Hoisting в Javascript + 3 примера)

Источник

JavaScript – Введение в события. Обработчик события

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

Событие – это определённый сигнал от браузера. Он сообщает нам о том, что что-то произошло.

Например: щелчок мыши, нажатие клавиши на клавиатуре, изменение размера области просмотра, завершение загрузки документа и т.д.

Список некоторых событий и их название:

Обработчик события

Следует отметить, что на странице постоянно возникает огромное количество событий, независимо от того назначили ли мы им обработчик или нет. Наша задача – это заставить наш сайт или приложение реагировать только на те события, которые нам небезразличны.

Способы задания событию обработчика

Назначить обработчик событию можно разными способами:

Инициализация обработчика через атрибут

Этот способ позволяет прописать обработчик напрямую в разметке. Выполняется это посредством указания JavaScript кода в атрибуте on <событие>. Вместо <событие>необходимо написать имя (тип) события (например: click ).

Если код, который нужно поместить в атрибут достаточно большой, то в этом случае его лучше оформить в виде функции, а в атрибут поместить её вызов.

При этом задавать обработчик напрямую в разметке не является хорошей практикой, т.к. это приведёт к смешиванию JavaScript и HTML кода.

Добавление обработчика через свойство DOM объекта

Например, привяжем обработчик события click к элементу (для этого события свойство будет onclick ):

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

Другой вариант – это назначить уже существующую функцию.

Кстати, когда обработчик задаётся через атрибут, то браузер самостоятельно при чтении такого HTML создаёт из значения этого атрибута функцию и присваивает её одноименному свойству этого элемента.

Т.е., по сути, задание свойства через атрибут – это просто способ инициализации обработчика. Т.к. сам обработчик в этом случае тоже хранится в свойстве DOM-объекта.

Но установка обработчика через свойство имеет недостаток. С помощью него нельзя назначить одному событию несколько обработчиков. Если в коде создадим новый обработчик, то он перезапишет существующий:

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

Подписка на событие через addEventListener

В options можно задать:

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

Как добавить несколько обработчиков к событию?

Метод addEventListener в отличие от предыдущих способов позволяет назначить одному событию несколько обработчиков:

Как правильно прикрепить обработчики к элементам?

Задачи

1. Скрыть элемент по нажатию кнопки с классом spoiler-trigger

Написать JavaScript код, который при нажатии на кнопку spoiler-trigger будет скрывать элемент, расположенный сразу за ней. При этом на странице таких кнопок может быть несколько.

Решение

2. Создать выпадающее меню

Имеется следующая разметка (стили добавлять не нужно, они имеются в примере):

Решение

Источник

Добавим обработчик события, который срабатывает при нажатии пользователем на кнопку:

Метод addEventListener() присоединяет обработчик события к определенному элементу. При этом новый обработчик события не переписывает уже существующие обработчики событий.

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

Вы можете добавлять обработчики событий к любому объекту DOM, а не только к HTML элементам, например, к объекту окна.

Метод addEventListener() позволяет легко контролировать то, как обработчик реагирует на, так называемое, «всплывание» события.

Когда используется метод addEventListener(), JavaScript отделяется от разметки HTML, что улучшает читаемость скрипта и позволяет добавлять обработчики событий даже тогда, когда вы не можете контролировать разметку HTML.

Чтобы удалить обработчик события, нужно воспользоваться методом removeEventListener().

Синтаксис:

элемент.addEventListener(событие, функция, useCapture);

Первый параметр — тип события (например, «click» или «mousedown»).

Второй параметр — функция, которая будет вызываться при возникновении события.

Третий параметр — логическое значение (true/false), определяющее следует ли отправить событие дальше («всплывание») или нужно закрыть это событие. Этот параметр необязателен.

Обратите внимание, что в имени события не используется префикс «on» — «click» вместо «onclick».

В следующем примере при нажатии пользователем на элемент появляется окно с сообщением «Hello World!»:

Также, можно задать и внешнюю «именованную» функцию:

Метод addEventListener() позволяет добавлять несколько обработчиков событий к одному и тому же элементу не переписывая уже существующие обработчики событий:

Также, можно добавлять обработчики событий разных типов:

Добавление обработчика событий к объекту window

Метод addEventListener() позволяет добавлять обработчики событий к любому объекту HTML DOM — HTML элементам, HTML документу, объекту окна (объект window) и другим объектам, поддерживающим события как объект xmlHttpRequest.

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

Передача параметров

Если необходимо передать параметры, то используйте «анонимную» функцию, которая вызывает специализированную функцию с параметрами:

Всплытие или перехват события?

В HTML DOM существует два способа распространения события — всплытие и перехват.

Распространение события — это последовательность обработки события HTML элементами. Если у вас есть элемент

, вложенный в элемент

, то какой элемент должен обработать событие «click» первым?

При всплытии первым обрабатывает событие самый вложенный элемент, затем его родитель и т.д.: таким образом сначала обрабатывать событие «click» будет элемент

При перехвате все происходит наоборот — сначала событие обрабатывает самый внешний элемент, в нашем случае

Метод addEventListener() позволяет задавать тип распространения события. Это можно сделать при помощи параметра «useCapture«:

addEventListener(событие, функция, useCapture );

По умолчанию этот параметр имеет значение false, что задает всплытие события. Если задать ему значение true, то будет использоваться перехват.

Метод removeEventListener()

Метод removeEventListener() удаляет обработчик события, подключенный методом addEventListener():

Поддержка браузерами

Методы addEventListener() и removeEventListener() в настоящее время поддерживаются всеми основными браузерами.

Однако, IE 8 и более ранних версий, а также Opera 6.0 и более ранних версий не поддерживают методы addEventListener() и removeEventListener(). Тем не менее, для этих версий браузеров можно использовать метод attachEvent() для прикрепления обработчика события и метод detachEvent() для его удаления:

элемент.attachEvent(событие, функция);
элемент.detachEvent(событие, функция);

Источник

JavaScript метод EventTarget.addEventListener()

Определение и применение

JavaScript метод addEventListener() объекта EventTarget позволяет зарегистрировать обработчик событий определенного типа для конкретной цели.

Обращаю Ваше внимание на то, что Вы можете использовать метод removeEventListener() для удаления обработчика событий, присоединенного с помощью метода addEventListener().

Поддержка браузерами

JavaScript синтаксис:

Cпецификация

Значения параметров

Пример использования

Базовое использование метода

С помощью метода addEventListener() мы установили для элемента обработчик события » click » (нажатие левой кнопкой мыши на элементе), который с помощью свойства target объекта Event проверяет имя тега элемента, и если это значение соответствует значению » LI «, то изменяет стиль цвета текста на зеленый при срабатывании. Обратите внимание, что зачастую удобнее установить один обработчик на родительский элемент, а не для каждого элемента по отдельности, особенно это актуально при динамическом изменении количества элементов, в этом случае отсутствует необходимость обновлять обработчики для элементов.

Далее с помощью метода forEach() объекта Array мы проходим по каждому элементу коллекции, и с помощью метода addEventListener() устанавливаем каждому элементу обработчик события » dblclick » (двойное нажатие левой кнопки мыши), который изменяет стиль цвета текста элемента на черный при срабатывании.

Результат нашего примера:

Пример использования JavaScript метода addEventListener()

Обращаю Ваше внимание на то, что допускается устанавливать элементу несколько обработчиков как одного, так и разных типов событий, например:

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

В этом примере с помощью метода addEventListener() для элемента мы установили три обработчика событий » mousedown «. Обратите внимание на важный момент, если в одном EventTarget (в нашем случае элемент ) с одинаковыми параметрами зарегистрировано несколько одинаковых прослушивателей (обработчиков) событий, повторяющиеся экземпляры в этом случае будут отброшены. Они не вызывают повторный вызов обработчиков событий, и их не нужно удалять вручную с помощью метода removeEventListener().

Использование параметра useCapture

Ранее некоторые браузеры требовали передачи методу addEventListener() третьего аргумента, поэтому при регистрации обычного, неперехватывающего обработчика, который срабатывает в фазе всплытия (bubbling phase) в третьем аргументе следует передавать значение false для поддержки старых версий браузеров.

Давайте рассмотрим следующий пример:

Схематическое отображение события, отправленного в дереве DOM элементу body

Использование параметра options

Давайте рассмотрим следующий пример:

Вам не нужно беспокоиться о значении passive для базового события прокрутки ( scroll ), так как его нельзя отменить, прослушиватели событий в любом случае не смогут блокировать показ страницы.

Нюансы использования this в обработчике события

Обратите внимание на важный момент, значение this может меняться, например, стрелочные функции не имеют собственного контекста this и в этом случае this не будет ссылаться на элемент:

Давайте разберем еще ситуацию, при которой обработчик события указан как атрибут события на HTML элементе. Код JavaScript в значении атрибута эффективно упаковывается в функцию обработчика, которая связывает значение this способом, соответствующим методу addEventListener() ( this в коде представляет ссылку на элемент):

При нажатии на элемент в консоль будет выведена информация о значении глобального атрибута id элемента, так как значение this внутри функции, вызываемой кодом в значении атрибута ведет себя согласно стандартным правилам, и ссылается в данном случае на элемент, который инициировал событие. Давайте рассмотрим следующий пример:

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

Источник

Введение в браузерные события

Событие – это сигнал от браузера о том, что что-то произошло. Все DOM-узлы подают такие сигналы (хотя события бывают и не только в DOM).

Вот список самых часто используемых DOM-событий, пока просто для ознакомления:

События мыши:

События на элементах управления:

Клавиатурные события:

События документа:

CSS events:

Существует множество других событий. Мы подробно разберём их в последующих главах.

Обработчики событий

Событию можно назначить обработчик, то есть функцию, которая сработает, как только событие произошло.

Именно благодаря обработчикам JavaScript-код может реагировать на действия пользователя.

Есть несколько способов назначить событию обработчик. Сейчас мы их рассмотрим, начиная с самого простого.

Использование атрибута HTML

Атрибут HTML-тега – не самое удобное место для написания большого количества кода, поэтому лучше создать отдельную JavaScript-функцию и вызвать её там.

Следующий пример по клику запускает функцию countRabbits() :

Использование свойства DOM-объекта

К примеру, elem.onclick :

Если обработчик задан через атрибут, то браузер читает HTML-разметку, создаёт новую функцию из содержимого атрибута и записывает в свойство.

Этот способ, по сути, аналогичен предыдущему.

Обработчик всегда хранится в свойстве DOM-объекта, а атрибут – лишь один из способов его инициализации.

Эти два примера кода работают одинаково:

В примере ниже назначение через JavaScript перезапишет обработчик из атрибута:

Кстати, обработчиком можно назначить и уже существующую функцию:

Доступ к элементу через this

Внутри обработчика события this ссылается на текущий элемент, то есть на тот, на котором, как говорят, «висит» (т.е. назначен) обработчик.

В коде ниже button выводит своё содержимое, используя this.innerHTML :

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

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

…А вот в разметке, в отличие от свойства, скобки нужны:

Так что разметка генерирует такое свойство:

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

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

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

Такой вызов работать не будет:

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

addEventListener

Например, одна часть кода хочет при клике на кнопку делать её подсвеченной, а другая – выдавать сообщение.

Мы хотим назначить два обработчика для этого. Но новое DOM-свойство перезапишет предыдущее:

Синтаксис добавления обработчика:

Для удаления обработчика следует использовать removeEventListener :

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

Вот так не сработает:

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

Метод addEventListener позволяет добавлять несколько обработчиков на одно событие одного элемента, например:

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

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

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

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

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

Некоторые свойства объекта event :

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

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

Мы также можем использовать класс для этого:

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

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

Итого

Есть три способа назначения обработчиков событий:

HTML-атрибуты используются редко потому, что JavaScript в HTML-теге выглядит немного странно. К тому же много кода там не напишешь.

DOM-свойства вполне можно использовать, но мы не можем назначить больше одного обработчика на один тип события. Во многих случаях с этим ограничением можно мириться.

Не важно, как вы назначаете обработчик – он получает объект события первым аргументом. Этот объект содержит подробности о том, что произошло.

Мы изучим больше о событиях и их типах в следующих главах.

Источник