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

我不能声称这个解决方案，但我在这里找到了一个很好的解决方案。

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();
    }

Answer 4

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

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

Answer 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");
  });
}

Answer 6

一行

<button class="button">
</button>
<button class="button">
</button>

Answer 7

针对每个元素初始化一个唯一事件侦听器的示例。

您可以使用滑块实时显示值，或检查控制台。

在<input>元素上，我有一个名为attr的{{1}}标记。您可以使用它来进一步自定义每个事件侦听器。

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
}

Answer 8

示例：

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

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

Answer 9

如果通过Electron使用Javascript，并且有一个按钮列表，则可以使用此代码向每个按钮添加一个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*/
   });
}

Answer 10

如果您有DOM集合，建议您使用for ... of

在此MDN web doc中，您可以看到详细信息，但是例如，如果您拥有：

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')
    });

达达！ ;）

Answer 11

这是我用来在我的 HTML 中的每个跨度上设置点击事件处理程序的内容（每个跨度包含一个表情符号）。当你点击它时，它会提醒示例代码中的表情符号。

Array.from(document.querySelectorAll("span")).map(element => element.addEventListener("click", function() {
  alert(element.innerHTML);
}));

div{background: whitesmoke;}
span{ont-size:x-large;
    cursor:pointer;}

<div>
  <span>&#128512;</span>
  <span>&#128513;</span>
  <span>&#128514;</span>
  <span>&#128515;</span>
  <span>&#128516;</span>
  <span>&#128517;</span>
  <span>&#128518;</span>
  <span>&#128519;</span>
  <span>&#128520;</span>
  <span>&#128521;</span>
  <span>&#128522;</span>
  <span>&#128523;</span>
</div>

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

11 个答案: