将事件绑定到JavaScript中的元素

Binding event to the element in JavaScript

本文关键字：元素 JavaScript 事件 绑定      更新时间：2023-09-26

一般来说，当我想将某个事件绑定到元素时，我会直接将该事件绑定到元素。例如，我想将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事件绑定到整个文档。为什么?

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

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

我想知道哪个更好?

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

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

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

另外，有时候在处理拖拽效果时，人们总是将鼠标移动事件绑定到整个文档，为什么?

问题是，当拖动一个元素时，鼠标移动的速度通常比元素移动的速度快，然后离开元素。如果只将mousemove事件绑定到被拖动的元素，那么每当光标离开元素时，移动就会停止。为了避免这种情况，将事件处理程序绑定到整个文档(在拖动过程中)，以便移动顺利。

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

只有当模型设计不好的时候，你才需要取消活动。例如，您在li中有链接，您需要阻止它们执行默认操作。

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

当元素分布在文档中并且很难"收集"它们时，例如当它们只有相同的类时，getElementsByClassName在纯JavaScript中不是很有效，因为您需要遍历所有元素，所以在这种情况下，最好总是触发该函数并检查已单击的内容。

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

请注意(只是为了学究气!)你绑定的是一个处理程序到一个元素的事件，而不是"将一些事件绑定到一个元素"。

相关文章：