Javascript 如何在一行中向多个元素添加EventListener

例1：

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

例2：

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

---

语法上可能不正确，但有没有一种方法可以让两个元素在同一时间（同一行）成为同一个事件侦听器，而不必将它们分开编写？

好吧，如果你有一个包含元素的数组，你可以：

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

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

---

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

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

---

我不能为这个解决方案赢得荣誉，但我在这里找到了一个很好的解决方案

---

到目前为止，这是我学到的最简单的方法

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

//从页面获取按钮数组
var按钮=document.queryselectoral（“.btns”）；
//循环遍历生成的数组
对于（变量i=0；i

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

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

---

初始化特定于每个元素的唯一事件侦听器的示例

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

在

元素上，我有一个名为

data which

的

attr

标记。您可以使用它进一步自定义每个事件侦听器

sliders=document.querySelectorAll（“输入”）；
sliders.forEach（项目=>{
item.addEventListener（'输入'，（e）=>{
log（`${item.getAttribute（“data whatever”）}是这个值：${e.target.value}`）；
item.nextElementSibling.textContent=e.target.value；
});
})

.wrapper{
显示器：flex；
}
跨度{
右侧填充：30px；
左边距：5px；
}
* {
字号：12px
}

50
大小


50
原创的


50
原创

示例：

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

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

---

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

let buttons=document.getElementsByClassName（'className'）；
for（设i=0；i{
/*把你的代码放在这里*/
});
}

一行

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

---

如果您有一个DOM集合，我建议您将

用于。。。属于

在这里，您可以看到详细信息，但是，例如，如果您有：

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

---

还有塔达！；）

下面是我用来在HTML中的每个跨度上设置click-evenhandler的内容（每个跨度包含一个表情符号）。当您单击它时，它将在示例代码中提醒表情符号

Array.from（document.queryselectoral（“span”））.map（element=>element.addEventListener（“单击”，函数）（）{
警报（element.innerHTML）；
}));
div{背景：白烟；}
span{ont size:x-large；
光标：指针；}

😀
😁
😂
😃
😄
😅
😆
😇
😈
😉
😊
😋
如果将其存储在阵列中，然后使用每个函数，可能会出现重复的情况哦，我希望它可以在一行中完成。尽管如此，我还是很感激您的回答如果您使用ES6，那么就有可能：
elementsArray.forEach（el=>el.addEventListener（'input'，functionthatthatstuff））
您对“单行”的定义是什么？通过删除换行符，任何JS程序都可以在一行上编写。使用
document.getElementsByTagName（）
eh，您无法获得列表吗？我试过了，但没有成功——我不得不使用
querySelectorAll
。谢谢你，这对我很有用！这对我不起作用。。。我在数组中有元素，我在每个元素上都附加了“单击”侦听器，但当我单击它时，事件永远不会触发！你测试过这个吗？我试过了，但它没有在控制台上打印任何内容。作为对接受答案的评论，这可能会更好，因为接受答案的作者更有可能改进他们的答案。我可以看到你的答案提供了一些有用的内容，但几乎没有人会在八个答案的底部阅读。我认为这是一个非常有用的解决方案，当元素指向不同的ID时。例如，如果你动态创建DOM元素，这是一个很好的技术，因为你不需要在用户交互上添加eventListeners。
let arrayElements = document.getElementsByClassName('example');
for (let element of arrayElements) {
    element.addEventListener("click", function() {
        console.log('Whoa! You clicked me')
    });