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

我想知道对许多具有类似功能的组件使用单个事件侦听器的优势是什么

所以第一个案例是

HTML文件是

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

按钮1
按钮2

剧本是

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

document.getElementById（“button1”）.addEventListener（“单击”，somefunction）；
document.getElementById（“button2”）.addEventListener（“单击”，somefunction）；
函数somefunction（）{
}

因此，这里我将两个单独的侦听器附加到两个按钮上

现在在第二种情况下…

我的HTML是

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

按钮1
按钮2

我的剧本是

<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>

window.addEventListener（'click'，函数（e）
{
e=e | | window.event；
var target=e.target | | e.src元素；
if（target.id==“button1”| | target.id==“button2”）{
somefunction（）；
}
}
函数somefunction（）{
}

因此，对于这两种情况以及整个窗口，我都有一个共同的侦听器。那么这两种情况之间的区别是什么？哪种情况适合使用？为什么？

改用类：

<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>

---

了解事件委派的一般情况。另请参见

event.target

page@Jonasw第二个更好。你能解释一下使用很多听众的缺点是什么吗？缺点是什么？@giri dharan真正的优点是自然添加的内容。例如，不重定向，只需重新加载主要部分而不是整个页面。使用方法二，您必须遍历这个新的dom并找到所有按钮等。使用方法二，它已经立即起作用。缺点可能是对深元素结构上发生的事件反应较慢。这需要在更深层的元素结构中，建议将事件侦听器添加到最近的公共祖先元素，而不是窗口或文档。

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