使用单个事件侦听器而不是多个事件侦听器答案

【问题标题】：Using a single event listener instead of many event listeners使用单个事件侦听器而不是多个事件侦听器
【发布时间】：2017-06-30 10:11:41
【问题描述】：

我想知道对许多功能相似的组件使用单个事件监听器有什么好处？

所以第一个案例是

HTML 文件是

<div id="button1">
  <h1>button1</h1>
</div>
<div id="button2">
  <h1>button2</h1>
</div>

脚本是

<script>
document.getElementById("button1").addEventListener("click", somefunction);
document.getElementById("button2").addEventListener("click", somefunction);
function somefunction() {
}
</script>

所以在这里我将两个单独的侦听器附加到两个按钮。

现在是第二种情况……

我的 HTML 是

<div id="button1">
  <h1>button1</h1>
</div>
<div id="button2">
  <h1>button2</h1>
</div>

我的脚本是

<script>
window.addEventListener('click',function(e)
{
  e = e || window.event;
  var target = e.target || e.srcElement;
  if(target.id=="button1" || target.id=="button2"){
  somefunction();
  }
}
function somefunction() {
}
</script>

所以我为这两个窗口以及整个窗口都有一个共同的侦听器。那么这两种情况有什么区别呢？哪个好用？为什么？

【问题讨论】：

大致了解事件委托。另见event.target
第二个更好。一个侦听器与 n 相比，其中 n 是您可以添加到页面中的按钮数量不断增长
@Jonasw 第二个更好就可以了。你能解释一下使用很多听众有什么缺点吗？有什么缺点？
@giri dharan 真正的优势是动态添加的内容。例如，您只需加载主要部分而不是再次加载整个页面，而不是重定向。使用方法二，您必须遍历这个新的 dom 并找到所有按钮等。使用方法二，它已经可以立即工作了。
缺点可能是对事件的反应较慢，这发生在深层元素结构上。一个事件需要一些时间才能冒泡到窗口。在更深的元素结构中，建议将事件侦听器添加到最近的公共祖先元素而不是窗口或文档。

标签： javascript html

【解决方案1】：

改用类：

<div id="button1" class="clickable">
  <h1>button1</h1>
</div>
<div id="button2" class="clickable">
  <h1>button2</h1>
</div>
<span class="clickable">this is a span-button</span>
<p class="clickable">this is a p-button</p>

一些 jQuery：

$(function() {
  $('.clickable').click(function() {
    // Your code here.
  });
});

【讨论】：