如何将addeventlistener添加到一行中的多个元素

Question

例1

Element1.addEventListener ("input", function() {
this function does stuff 
});

例2

Element1 && Element2.addEventListener("input", function() {
this function does stuff
});

它可能在语法上不正确,但是有没有办法可以同时给两个元素同一个Dom方法(同一行)而不必将它们分开？

Answer 1

好吧,如果你有一个包含你可以做的元素的数组:

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

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

Answer 2

事件冒泡是javascript中的重要概念,因此如果您可以直接在DOM上添加事件,则可以保存一些代码行,无需循环:

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

Answer 3

一条线

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

Answer 4

如果您不想定义单独的elementsArray变量，则可以从具有两个元素的未命名数组中调用forEach。

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

Answer 5

我总是建议委托 - 如果输入位于同一个容器中，那么你可以这样做

window.addEventListener("DOMContentLoaded", function() { // on page load
  document.getElementById("inputContainer").addEventListener("input", function(e) { // passing the event
    const tgt = e.target;
    const id = tgt.id;
    console.log("You typed in",id)
  });
});

<div id="inputContainer">
  <h1>Start typing or paste</h1>
  <input id="element1">
  <input id="element2">
</div>