如何在单行中为多个元素添加addEventListener

Question

示例1：

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

示例2：

element1 && element2.addEventListener("input", function() {
  // this function does stuff
});

语法可能不正确，但我是否可以在同一行上同时为两个元素提供相同的事件侦听器（而不必将它们分开编写）？

- Jamisco

---

可能是重复的问题：如何向多个元素添加事件监听器 - Meghdad Hadidi

如果您将其存储在数组中，然后使用each函数会怎样？ - RizkiDPrast

Answer 1

如果你有一个包含元素的数组，你可以这样做：

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

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

- GMaiolo

---

哦，我本希望这可以用一句话概括。不过无论如何，我感激你的回答。 - Jamisco

如果你使用ES6，那么可以这样做：elementsArray.forEach(el => el.addEventListener('input', functionThatDoesStuff))。该代码会给elementsArray数组中的每个元素添加一个input事件监听器，并在触发事件时调用functionThatDoesStuff函数。 - GMaiolo

“单行代码”是什么意思？通过去除换行符，任何JS程序都可以写成单行代码。 - user663031

你不能使用 document.getElementsByTagName() 获取列表，是吗？我尝试过了，但它不起作用 - 我必须使用 querySelectorAll。非常感谢您的帮助，这对我很有用！ - BruceWayne

这对我不起作用... 我有一个数组中的元素，并且我已经在每个元素上附加了“Click”侦听器，但是当我单击它时，事件从未触发！ - IamCavic

Answer 2

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

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

- Ayush Sharma

---

这是一种不错的技巧，如果您动态创建DOM元素，因为您不需要在用户交互时添加事件监听器。 - squarespiral

Answer 3

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

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

- John Ayling

---

我认为当元素指向不同的ID时，这是一个非常有用的解决方案。 - Anshuman Manral

很好，这正是我在寻找的。 - JonoJames

我最喜欢这个，因为数组可以包含任何需要特定查询选择器的元素。干得好！ - ToxicFlame427

Answer 4

一行

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

- Adrian

---

这个假设所有元素共享相同的选择器，但实际情况可能并非如此，即使它们是这样的，有些元素可能需要被排除在外等。 - Vitaliy Terziev

@VitaliyTerziev 你说得对，我的回答有点讽刺意味...把所有东西都放在“一行”中总是可能的，但通常没有用。 - Adrian

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>

- mplungjan

Answer 6

我不能为这个解决方案拍胸脯，但我在这里找到了一个很好的解决方案。

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

- daniella

Answer 7

也许这会对你有所帮助。

let all_btn = document.querySelectorAll("button");
all_btn.forEach(function(btn) {
    btn.addEventListener("click", function() {
        console.log(this.innerHTML + " is clicked")
    });
});

// one line code
// let all_btn=document.querySelectorAll("button");all_btn.forEach(function(n){n.addEventListener("click",function(){console.log(this.innerHTML+" is clicked")})});

<button>button 1</button>
<button>button 2</button>
<button>button 3</button>

- Abdul Rehman

Answer 8

如果您正在通过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*/
   });
}

- MrAnyx

---

这条评论如果作为已被接受的回答的一条评论可能会更好，因为这样更有可能让被接受答案的作者改进他们的答案。我可以看到你的答案提供了一些有用的内容，但是很少有人会在八个答案的底部去阅读它。 - David M

Answer 9

例子：

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

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

- Noman Gul

Answer 10

您可以使用点击事件对象的路径键向多个元素添加事件侦听器。

document.addEventListener('click', function(e){
  //e.path[0].id;
  //e.path[0].tagName;
  //e.path[0].className;
  if(e.path[0].className==="my-element"){
    console.log("clicked");
  }
})

- abrham t