当前位置: 首页 > Web前端 > HTML

事件委托

时间:2023-04-02 17:43:28 HTML

背景在JS中,页面中添加的事件处理程序会占用内存,占用内存越多性能越差,而且必须提前指定所有事件处理程序,导致DOM访问次数增加增加它会延迟整个页面的交互准备。特别是table的td和ul的li的事件处理,如果给大量子元素添加事件,会占用大量内存。绑定的事件处理器越多,对性能的影响越大,但是不能说不绑定事件,所以我们需要一种方法来减少绑定的事件,使用事件委托。原理当DOM上的事件被触发时,会产生一个事件对象event,其中包含与该事件相关的所有信息,包括引发事件的元素、事件的类型以及与特定事件相关的其他信息。避免专门为每个节点添加事件监听器;相反,事件监听器被添加到它们的父元素中。事件监听器会分析子元素冒出的事件,找出是哪个子元素的事件。用法假设我们有一个包含多个子元素的UL元素:

  • Item1
  • Item2
  • Item3
  • Item4
  • Item5
  • 假设您需要触发每个li以更改其背景颜色,您可以向每个单独的li元素添加事件侦听器。window.onload=function(){varoUl=document.getElementById("ul");varaLi=oUl.getElementsByTagName("li");for(vari=0;i