Как addeventlistener для нескольких элементов в одной строке

Ответ 1

Хорошо, если у вас есть массив с элементами, которые вы можете сделать:

let elementsArray = document.querySelectorAll("whatever");

elementsArray.forEach(function(elem) {
    elem.addEventListener("input", function() {
        //this function does stuff
    });
});

Ответ 2

Событие Bubbling - важная концепция в javascript, поэтому, если вы можете добавить событие непосредственно в DOM, вы можете сохранить некоторые строки кода, не нужно зацикливаться:

document.addEventListener('click', function(e){
  if(e.target.tagName=="BUTTON"){
   alert('BUTTON CLICKED');
  }
})

Ответ 3

Если вы не хотите иметь отдельную переменную elementArray, вы можете просто вызвать forEach из неназванного массива с двумя элементами.

[ Element1, Element2 ].forEach(function(element) {
   element.addEventListener("input", function() {
      this function does stuff
   });
});

Ответ 4

Я не могу претендовать на кредит для этого решения, но я нашел отличное решение здесь.

https://www.kirupa.com/html5/handling_events_for_many_elements.htm

    var theParent = document.querySelector("#theDude");
    theParent.addEventListener("click", doSomething, false);

    function doSomething(e) {
        if (e.target !== e.currentTarget) {
            var clickedItem = e.target.id;
            alert("Hello " + clickedItem);
        }
        e.stopPropagation();
    }

Ответ 5

Самый простой способ до сих пор я узнал.

// Get an array of buttons from the page
var buttons = document.querySelectorAll(".btns");

// Loop through the resulting array
for(var i = 0; i < buttons.length; i++){
  buttons[i].addEventListener("click", function() {
    console.log("Hello World");
  });
}

Ответ 6

Если вы используете Javascript через Electron и у вас есть список кнопок, вы можете использовать этот код для добавления EventListener к каждой кнопке. Я на самом деле использую этот метод, потому что классические методы Javascript (map(), forEach()...) больше не поддерживаются.

let buttons = document.getElementsByClassName('className');
for(let i = 0; i<buttons.length; i++){
   buttons[i].addEventListener('click', () => {
      /*put your code here*/
   });
}

Ответ 7

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

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

В элементе <input> меня есть тег attr называемый data-whatever. Вы можете использовать это для дальнейшей настройки каждого слушателя событий.

sliders = document.querySelectorAll("input");
sliders.forEach(item=> {
  item.addEventListener('input', (e) => {
    console.log('${item.getAttribute("data-whatever")} is this value: ${e.target.value}');
    item.nextElementSibling.textContent = e.target.value;
  });
})

.wrapper {
  display: flex;
}
span {
  padding-right: 30px;
  margin-left: 5px;
}
* {
  font-size: 12px
}

<div class="wrapper">
  <input type="range" min="1" data-whatever="size" max="800" value="50" id="sliderSize">
  <em>50</em>
  <span>Size</span>
  <br>
  <input type="range" min="1" data-whatever="OriginY" max="800" value="50" id="sliderOriginY">
  <em>50</em>
  <span>OriginY</span>
  <br>
  <input type="range" min="1" data-whatever="OriginX" max="800" value="50" id="sliderOriginX">
  <em>50</em>
  <span>OriginX</span>
</div>

Ответ 8

Пример:

const element1 = document.querySelector("#element1");
const element2 = document.querySelector("#element2");

[element1, element2].map(element => element.addEventListener("click", function() {
  /*some expressions :)*/
}))

Ответ 9

Одна строка

document.querySelectorAll("whatever").forEach(elem => elem.addEventListener("input", fn))

Ответ 10

Если у вас есть коллекция DOM, я предлагаю вам использовать for ... of

В этом веб-документе MDN вы можете увидеть подробности, но, например, если у вас есть:

HTMLCollection(6) [a.example, a.example, a.example, a.example, a.example, a.example]

Вы можете:

let arrayElements = document.getElementsByClassName('example');
for (let element of arrayElements) {
    element.addEventListener("click", function() {
        console.log('Whoa! You clicked me')
    });

И та-да! ;)