Addeventlistener не работает повторно

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

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

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

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

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

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

Чтобы «повесить» обработчик событий на наш элемент button, нужно использовать специальный метод — addEventListener. Этот метод принимает 2 аргумента:

1. Тип события (мы будем «слушать» событие «click»).
2. Так называемую колбэк (callback) функцию, которая запускается после срабатывания нужного события.

Колбэк функция (callback function) — отличается от обычной функции, тем, что ее запускаем не мы, а браузер, который делает это после срабатывания события.

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

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

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

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

Давайте использовать готовую логику в функции handleClick — для новой кнопки:

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

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

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

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

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

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

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

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

Здесь мы можем выделить все кнопки с одинаковым классом и присвоить их переменной buttons. Далее нам потребуется использовать цикл forEach, чтобы пробежаться по каждой кнопке в полученном списке, и повесить на нее обработчик событий addEventListener.

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

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

То есть, мы можем повесить обработчик событий на родительский div с классом «wrapper», и обрабатывать события, которые активируются на дочерних элементах button.

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

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

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

Источник

JavaScript addEventListener почему-то не работает

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

А вот мой код JS:

Первое предупреждение в начале файла JS срабатывает, когда я загружаю страницу, но второе внутри файла addEventListener не срабатывает.

4 ответа

почему-то addEventListener у меня не работает. Я использую следующую функцию. Он показывает мне количество строк в предупреждении в строке 8, но никогда не говорит завершено. Может ли кто-нибудь объяснить причину? Я использую IE. function load() < var lnk = new Array(); lnk =.

Я пишу простое расширение chrome, которое перечисляет все открытые вкладки, у меня есть этот код function changeTab(tabID)< chrome.tabs.update(tabID,) > chrome.windows.getCurrent(,function (window)< list = document.getElementById('open-tabs'); for (var i = 0; i

Нет ничего похожего на document.getElementByTagName(«body»); Это document.getElementsByTagName(«body»); , который возвращает вам коллекцию, и вам нужно пройти через эту коллекцию, чтобы прикрепить события к каждому узлу в ней

Или вы можете использовать document.querySelector(‘body’) для выбора тела и document.querySelector(‘button’) для выбора кнопки

Читайте здесь о document.querySelector

Сигнатура метода для получения элементов по имени тега

Но вы используете

Любым способом в следующем коде

Вы получаете набор кнопок, а не одну кнопку. Где вы хотите добавить EventListener? Лучшим способом может быть доступ к элементу по идентификатору, назначив идентификатор кнопке в HTML

В противном случае вы также можете попробовать, так как у вас есть только одна кнопка, к которой вы собираетесь добавить EventListener

getElementByTagName должно быть getElementsByTagName

И вы можете использовать querySelector вместо getElementsByTagName , как это:

И вам не нужно назначать переменную для тела. Просто сошлитесь на него с document.body вот так:

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

jsFiddle: https://jsfiddle.net/AndrewL64/2cscc5ka /

Я изучаю addEventListener, я тестировал один из примеров, но он не работает. Кто-нибудь может сказать мне, что я делаю не так

на самом деле проблема в том, что вы вызываете getElementByTagName , а это getElementsByTagName . также он возвращает массив элементов.

проверьте рабочий образец:

Также проверьте, что будет проще использовать свойство id и функцию getElementById

Похожие вопросы:

Это и есть javascript. Я никак не могу понять, почему addEventListener не хочет работать. Я пытаюсь навести курсор мыши, но он не выдает предупреждения. Это кажется таким простым, но я не могу.

Источник

Метод EventTarget.addEventListener()

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

EventTarget может быть Element , Document , Window , или любым другим объектом, поддерживающим события (таким как XMLHttpRequest (en-US) ).

Синтаксис

Параметры

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

Возвращаемое значение

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

Колбэк обработчика событий

Обработчик событий может быть задан либо как колбэк-функция, либо как объект реализующий EventListener , чей handleEvent() (en-US) метод служит как колбэк-функция.

Сама колбэк-функция имеет те же параметры и возвращаемое значение что и метод handleEvent() ; То есть колбэк принимает единственный параметр: объект основанный на Event описывая событие, которое произошло и ничего не возвращая.

Например, колбэк обработчика событий, который может использоваться для обработки fullscreenchange (en-US) и fullscreenerror (en-US) может выглядеть так:

Безопасная проверка поддержки option

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

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

Например, если вы хотите проверить параметр passive :

Этот код создаёт объект options с геттером для свойства passive, устанавливающим флаг passiveSupported в true , если он вызван. Это означает, что если браузер проверяет значение свойства passive на объекте options , значение passiveSupported будет установлено в true; в противном случае он останется ложным. Затем мы вызываем addEventListener , чтобы настроить фальшивый обработчик событий, указав эти параметры для проверки опций, если браузер распознает объект в качестве третьего параметра.

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

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

Здесь мы добавляем обработчик события mouseup (en-US) элемента someElement . Для третьего параметра, если passiveSupported имеет значение true , мы указываем объект options с passive: true ; в противном случае мы знаем, что нам нужно передать логическое значение, и мы передаём false как значение параметра useCapture .

Вы можете использовать стороннюю библиотеку, такую как Modernizr или Detect It, чтобы проверить поддержку необходимого свойства.

Примеры

Добавление простого обработчика

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

HTML Содержимое

JavaScript Содержимое

В примере выше, modifyText() регистрирует обработчика для события click, используя addEventListener() . Клик в любом месте таблицы будет поднимать обработчик и запускать modifyText() .

Результат

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

Слушатель события с анонимной функцией

HTML Содержимое

JavaScript Содержимое

Notice that the listener is an anonymous function that encapsulates code that is then, in turn, able to send parameters to the modifyText() function, which is responsible for actually responding to the event.

Результат

Слушатель события со стрелочной функцией

JavaScript

Результат

Обратите внимание: несмотря на то, что анонимные и стрелочные функции схожи, они имеют разные значения this .

Примечания

Зачем использовать addEventListener ?

addEventListener — это способ зарегистрировать обработчик события, описанный в документации W3C DOM. Вот список преимуществ его использования:

• Позволяет добавлять множество обработчиков для одного события. Это особенно полезно для DHTML библиотек или Mozilla extensions, которые должны работать в условиях использования сторонних библиотек/расширений.
• Предоставляет точный контроль фазы срабатывания(вызова) обработчика (захват или всплытие)
• Срабатывает на любом DOM-элементе, а не только на HTML-элементах.

Добавление обработчика во время обработки события

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

Несколько одинаковых обработчиков события

Если зарегистрировано несколько одинаковых EventListener на одном EventTarget с одинаковыми параметрами, дублирующиеся обработчики игнорируются. Так как одинаковые обработчики игнорируются, не требуется удалять их вручную с помощью метода removeEventListener.

Значение this в обработчике

Обычно желательно передавать элемент, на котором сработал обработчик события, например, при использовании обобщённых обработчиков для схожих элементов. При добавлении функции при помощи addEventListener() значение переменной this меняется — заметьте, что значение this передаётся в функцию от вызывающего объекта.

В примере выше значение переменной this внутри modifyText() при вызове событием клика равно таблице ‘t’. Это противоположно поведению, которое возникает, если обработчик добавлен в HTML-разметке:

Значение переменной this внутри modifyText() при вызове событием клика будет равно ссылке на глобальный (window) объект (или undefined при использовании strict mode)

Пример с использованием bind и без него:

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

Наследство Internet Explorer и attachEvent

В Internet Explorer младше 9 версии, вы можете использовать attachEvent вместо стандартного addEventListener . Для поддержки IE, пример выше может быть модифицирован следующим образом:

У attachEvent есть недостаток: this будет ссылаться на объект window , а не на элемент, на котором он был вызван.

Совместимость

Вы можете обойти методы addEventListener , removeEventListener , Event.preventDefault и Event.stopPropagation не поддерживаемы в IE 8 используя следующий код в начале вашего скрипта. Этот код поддерживает использование handleEvent и события DOMContentLoaded .

Note: useCapture не поддерживается, так как IE 8 не имеет альтернативного метода для этого. Также заметьте, что следующий код только добавляет поддержку IE 8. Также, он работает только при соблюдении стандартов: объявление DOCTYPE страницы обязательно.

Старый способ регистрации обработчиков событий

addEventListener() был добавлен в спецификации DOM 2 Events. До этого обработчики добавлялись следующим образом:

Этот метод заменяет текущие слушатели события click , если они есть. Тоже самое для других событий и ассоциируемых с ними обработчиков, таких как blur ( onblur ), keypress ( onkeypress ), и так далее.

Так как это по существу было частью DOM 0, этот метод имеет широкую поддержку и не требует специального кросс-браузерного кода; следовательно, это обычно используется, чтобы добавлять обработчики динамически, если не требуются расширенные возможности addEventListener() .

Вопросы памяти

В первом случае новая (анонимная) функция создаётся при каждом шаге цикла. Во втором случае одна заранее объявленная функция используется как обработчик события. Из этого следует меньшее потребление памяти. Более того, в первом случае, вследствие отсутствия ссылок на анонимные функции, невозможно вызвать element.removeEventListener, потому что нет ссылки на обработчик, в то время, как во втором случае возможно вызвать myElement.removeEventListener(«click», processEvent, false) .

Улучшение производительности прокрутки с помощью passive: true

Значение по умолчанию для параметра passive — false . Начиная с Chrome 56 (desktop, Chrome for Android, Android webview) значение по умолчанию для touchstart (en-US) и touchmove (en-US) равно true , а вызовы preventDefault() не разрешены. Чтобы отменить это поведение, необходимо установить параметр passive в false (см. пример ниже). Это изменение не позволяет обработчику блокировать показ страницы во время прокрутки пользователя. Демонстрация доступна на сайте разработчиков Google. Обратите внимание, что Edge вообще не поддерживает options , и добавление его без проверки поддержки помешает использовать аргумент useCapture .

Установка passive не имеет значения для основного события scroll (en-US) , поскольку его нельзя отменить, поэтому его обработчик в любом случае не может блокировать показ страницы.

Источник