Question

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

所以第一个案例

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>

所以我和两个人以及整个窗口都有一个共同的倾听者。那两个案件之间有什么区别？哪一个好用？为什么？

Answer 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.
  });
});

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

1 个答案: