在JavaScript中将事件绑定到元素

Question

通常情况下，当我想将某个事件绑定到一个元素上时，我会直接将该事件绑定到该元素上。例如，我想将点击事件绑定到“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 事件绑定到整个文档上。为什么？

- hguser

---

+1 好问题。我怀疑这可能与移动设备兼容性有关，其中点击是轻触。 - Ruslan

Answer 1

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

这被称为事件委托，在您想要为多个元素触发相同的事件处理程序时特别有用。您不必将事件处理程序绑定到每个元素上，而是将其绑定到共同的祖先，然后检查事件起源于哪个元素。这有效，因为事件会冒泡到DOM树上。

我想知道哪种方法更好？

这取决于情况，两种方法都有优缺点。

事件委托可能会更慢，因为事件必须先冒泡。您还可能需要执行DOM遍历，因为事件可能不是从您测试的元素起源的。例如，在您的示例中，li元素可能有其他子元素，比如一个a元素。要找出单击的a元素是否是li元素的后代，您必须遍历祖先并对它们进行测试。

另一方面，直接绑定处理程序在元素上处理事件更快。但是，如果您绑定了许多事件处理程序并且没有正确执行（就像您的示例那样），则使用的内存比实际需要的要多。如果有许多事件处理程序，则旧版浏览器（我认为特别是IE）可能表现更差。

此外，有时在处理拖动效果时，人们经常将mousemove事件绑定到整个文档中，为什么？

问题在于，在拖动元素时，鼠标通常移动得比元素更快，并离开它。如果只将mousemove事件绑定到拖动的元素上，则光标离开元素时，移动会停止。为避免这种情况，事件处理程序绑定到整个文档（在拖动期间）以使移动平滑进行。

- Felix Kling

Answer 2

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

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

- epascarello

Answer 3

在click事件的情况下，最好直接绑定到受影响的元素，没有必要绑定到所有元素-为什么需要在单击与您完全无关的东西时触发函数？

当元素分散在文档中且难以“收集”它们时，例如当它们只具有相同的类时，它可能很有用-在纯JavaScript中，getElementsByClassName不是非常有效，因为您需要遍历所有元素，因此在这种情况下最好始终触发函数并检查已单击了什么。

- Shadow The Spring Wizard

Answer 4

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

请注意（只是为了追求严谨！）您将处理程序绑定到元素的事件，而不是“将某个事件绑定到元素”。

- Sam Dutton