Question

这是在JavaScript中声明多个事件侦听器的最快方法。我应该这样吗？

 <div onclick="myFunction();">
   <div>Element 1</div>
   <div>Element 2</div> 
 </div>

或者这样：

 <div>
   <div onclick="myFunction();">Element 1</div>
   <div onclick="myFunction();">Element 2</div> 
 </div>

有人有什么建议吗？

Answer 1

取决于您需要执行的操作。无论如何，不建议使用内联事件处理程序。如果您给div一个类，并给容器一个ID或一个类，则可以进行适当的事件处理

TextToSpeech.Engine.ACTION_INSTALL_TTS_DATA

如果要将事件侦听器添加到内部div，则可以循环

document.querySelector("#containerDiv").addEventListener("click",function(e) {
  var clickedDiv = e.target;
  if (e.target.classList.contains('div1') {
    console.log("I am div 1");
  }
});

这是一篇有关循环nodeLists的好文章

https://developer.mozilla.org/en-US/docs/Web/API/NodeList

Answer 2

您可以像这样向子<div>添加事件侦听器：

[].forEach.call(document.querySelectorAll("#containerDiv div"), div => {
    div.addEventListener("click", myFunction);
});

如何有效地在div上声明事件

2 个答案: