Question

通常，当我想将某个事件绑定到一个元素时，我会直接将该事件绑定到该元素。例如，我想将click事件绑定到“li”元素：

<ul id="ul_list">
  <li class="t">xxxx</li>
  <li class="t">xxxx</li>
  .....
</ul>

var lis=document.getElementById("ul_list").children();
for(var i=0;i<lis.length;i++){
  lis[i].onclick=function(){
    console.info(this.innerHTML);
  }
}

有效。

但是在一些开源代码中，我发现人们更喜欢将事件绑定到父元素：

document.onclick=function(e){
 e=e==null?:window.event:e;
 var target=e.target; //the browser is not considered here
 if(target.className=='t' && target.localName='LI'){
  console.info(target.innerHTML);
 }
}

我想知道哪个更好？

此外，在处理拖动事件时，人们将mousemove事件绑定到整个文档。为什么呢？

Answer 1

人们更喜欢将事件绑定到父元素

这被称为event delegation，当您想要为多个元素触发相同的事件处理程序时，它尤其有用。您不是将事件处理程序绑定到每个元素，而是将其绑定到公共祖先，然后检查事件源自哪个元素。这很有效，因为events bubble up the DOM tree。

我想知道哪个更好？

这取决于两种方法都有其优缺点。

事件委托可能会变慢，因为事件必须先冒泡。您还可能必须执行DOM遍历，因为事件可能不是源自您测试的元素。例如，在您的示例中，li元素可能包含其他子元素，假设为a元素。要确定单击的a元素是否是li之一的后代，您必须遍历祖先并测试它们。

另一方面，直接绑定处理程序的速度更快，因为事件直接在元素处理。但是如果绑定了很多事件处理程序并且没有正确执行（比如在您的示例中），则使用的内存比实际需要的多。如果有许多事件处理程序，旧的浏览器（我认为尤其是IE）也可能表现得更差。

另外，有时处理拖动效果时，人们总是将mousemove事件绑定到整个文档，为什么？

问题在于，拖动元素时，鼠标经常比元素移动更快并离开它。如果仅将mousemove事件绑定到拖动的元素，则只要光标离开元素，移动就会停止。为避免这种情况，事件处理程序绑定到整个文档（在拖动期间），以便移动顺利。

Answer 2

链接到父级意味着您要添加一个事件处理程序而不是多个。这可以提高应用程序的性能！此外，如果向页面添加新元素，则无需担心绑定它们。

只有当该模型是一个糟糕的设计时，才需要取消该事件。例如，您在li中有链接，您需要阻止它们执行默认操作。

Answer 3

如果发生click事件，最好直接绑定到受影响的元素，没有点绑定到所有内容 - 为什么在单击与您完全无关的内容时需要触发函数？

当元素分布在文档上并且难以“收集”它们时，它可能很有用，例如当它们只有相同的类时 - getElementsByClassName在纯JavaScript中效率不高，因为你需要遍历所有元素，所以在这种情况下最好总是触发函数并检查点击的内容。

Answer 4

将处理程序绑定到最具体的事件和元素。

请注意（只是迂腐！）将处理程序绑定到元素的事件，而不是“将某个事件绑定到元素”。

将事件绑定到javascript中的元素

4 个答案: