Добавить прослушиватель событий к нескольким элементам в Javascript
web-design web-development javascript typescript

Добавить прослушиватель событий к нескольким элементам в Javascript

21 октября 2022 г.

Если вы когда-либо работали с ванильным Javascript, возможно, вы знакомы с добавлением прослушивателей событий к элементам по следующей формуле: 

let element = document.querySelector('#button');

element.addEventListener('click', () => {
    console.log('some event content here...')
})

Приведенный выше код, конечно же, вызовет функцию, которая запускается при срабатывании #button. Однако иногда вам нужно добавить прослушиватель событий к нескольким элементам — скажем, к каждой кнопке на странице. Возможно, вы обнаружили, что даже если у вас есть несколько элементов на странице, описанный выше подход добавляет ваше событие только к одному элементу — первому. Что дает?

Проблема в том, что addEventListener подходит только для добавления события к одному элементу DOM, а querySelector также соответствует только одному элементу. Так как же добавить прослушиватель событий к нескольким элементам на странице? Давайте посмотрим на решение.

Добавление прослушивателей событий к нескольким элементам

Вместо использования querySelector мы собираемся использовать querySelectorAll для сопоставления всех элементов на нашей странице. Следующий код возвращает элемент типа NodeList, состоящий из всех элементов DOM, соответствующих .button. Чтобы добавить события к каждому элементу, нам нужно будет перебрать каждый соответствующий элемент из нашего querySelector и добавить события к каждому:

let elements = document.querySelectorAll('.button');

Javascript странный, потому что он не возвращает элементы DOM в виде простого массива — он возвращает их в виде NodeList. Если вы хотите узнать больше о списках узлов, прочитайте мое руководство по этому вопросу здесь.

В современных браузерах списки NodeList во многом похожи на массивы, поэтому мы можем использовать forEach для циклического просмотра каждого из них. Затем, чтобы добавить событие к каждой .button, нам нужно прокрутить его, используя forEach. Итак, добавление события click ко всем элементам .button выглядит следующим образом:

let elements = document.querySelectorAll('.button');

elements.forEach((item) => {
    item.addEventListener('click', () => {
        console.log('some event content here...')
    })
});

Однако в старых браузерах, таких как Internet Explorer, forEach не существует в списках NodeList. Хотя в наши дни это не проблема, вы можете найти код, в котором результат querySelectorAll преобразуется в массив и зацикливается. Это приводит к тому же результату, но это означает, что мы перебираем массивы, а не NodeList.

let elements = document.querySelectorAll('.button');
Array.prototype.forEach.call(elements, (item) => {
    item.addEventListener('click', function(e) {
        console.log('some event content here...')
    });
});

Также опубликовано здесь

Оригинал

Recent Post

Categories

PREVIOUS ARTICLE
NEXT ARTICLE