javascript - 将事件绑定(bind)到 JavaScript 中的元素

Question

一般情况下，当我想给元素绑定(bind)一些事件的时候，我会直接把事件绑定(bind)到元素上。比如我想给“li”元素绑定(bind)点击事件:

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

有效。

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

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 事件绑定(bind)到整个文档。为什么？

Answer 1

people prefer to bind the event to the parent element

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

I wonder which is better?

视情况而定，这两种方法各有利弊。

事件委托(delegate)可能会更慢，因为事件必须先冒泡。您可能还必须执行 DOM 遍历，因为事件可能并非源自您测试的元素。例如，在您的示例中， li 元素可能有其他子元素，比方说 a 元素。要找出被点击的 a 元素是否是 li 之一的后代，您必须遍历祖先并测试它们。

另一方面，直接绑定(bind)处理程序在事件直接在元素处处理的意义上更快。但是，如果您绑定(bind)了很多事件处理程序并且没有正确执行(就像在您的示例中一样)，那么您使用的内存比您实际需要的多。如果有很多事件处理程序，较旧的浏览器(我认为尤其是 IE)的性能也可能更差。

Also,sometime when handle the drag effect,people always bind the mousemove event to the whole document,why?

问题是在拖动一个元素时，鼠标移动的速度通常比元素快并离开它。如果将 mousemove 事件仅绑定(bind)到被拖动的元素，则只要光标离开该元素，移动就会停止。为避免这种情况，事件处理程序绑定(bind)到整个文档(在拖动期间)，以便移动平稳。