在JavaScript中将事件绑定到元素

2ekbmq32 于 2023-01-16 发布在 Java

关注(0)|答案(4)|浏览(107)

一般来说，当我想把某个事件绑定到一个元素上时，我会直接把事件绑定到元素上，比如我想把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事件绑定到整个文档，这是为什么？

JavaScript

来源：https://stackoverflow.com/questions/7176859/binding-event-to-the-element-in-javascript

4条答案

按热度按时间

ui7jx7zq1#

人们喜欢将事件绑定到父元素
这被称为event delegation，当你想为多个元素触发同一个事件处理程序时特别有用，你不是把一个事件处理程序绑定到每一个元素，而是把它绑定到一个共同的祖先，然后检查事件是从哪个元素产生的，这是可行的，因为events bubble up the DOM tree .
我想知道哪个更好？
这要看情况，两种方法都有各自的优点和缺点。
事件委托可能会比较慢，因为事件必须首先冒泡。您还可能需要执行DOM遍历，因为事件可能不是从您测试的元素中产生的。例如，在您的示例中，li元素可能有其他子元素，假设a元素，为了找出被点击的a元素是否是li元素之一的后代，必须遍历祖先并测试它们。
另一方面，直接绑定处理器更快，因为事件是直接在元素中处理的。但是如果你绑定了很多事件处理器，并且没有正确地做（就像你的例子），你会使用比你实际需要的更多的内存。如果有很多事件处理器，旧的浏览器（我认为特别是IE）也会表现得更差。
还有，有时候在处理拖拽效果的时候，人们总是把鼠标移动事件绑定到整个文档上，为什么？
问题是当拖动一个元素时，鼠标移动的速度通常比元素移动的速度快，并且会离开它。如果您只将mousemove事件绑定到被拖动的元素，那么每当光标离开元素时，移动就会停止。为了避免这种情况，事件处理程序被绑定到整个文档（在拖动期间），以便移动平滑。

赞(0）回复(0）举报 2023-01-16

pod7payv2#

链接到父级意味着您将添加一个事件处理程序而不是多个。这将大大提高应用程序的性能！此外，如果您向页面添加新元素，则不必担心绑定它们。
只有当你需要取消事件的时候，这个模型才是一个糟糕的设计，例如，你在li中有链接，你需要阻止它们执行默认的操作。

赞(0）回复(0）举报 2023-01-16

x7rlezfr3#

在click事件的情况下，最好直接绑定到受影响的元素，而不是点绑定到所有东西-为什么你需要在点击与你完全无关的东西时触发你的函数呢？
当元素散布在文档中并且很难“收集”它们时，它会很有用，例如，当它们只有相同的类时-getElementsByClassName在纯JavaScript中不是很有效，因为您需要迭代所有元素，所以在这种情况下，最好总是触发该函数并检查单击了什么。

赞(0）回复(0）举报 2023-01-16

5m1hhzi44#

将处理程序绑定到尽可能特定的事件和元素。
注意（只是为了学究气！）您将处理程序绑定到元素的事件，而不是“将某个事件绑定到元素”。

赞(0）回复(0）举报 2023-01-16