javascript--事件委托-优快云博客

本文深入解析了事件委托这一前端开发中的高效事件处理策略。通过利用事件冒泡机制，仅需在顶层DOM元素上设置一个事件监听器，即可处理多个子元素的事件，显著提升代码效率与性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//事件委托
        function f2(d) {

            document.onclick = function(e) {

                var e = e || window.event;
                var target = e.srcElement || e.target;

                if (target.tagName == “LI”) {
                    ……
                }
      }
}

事件委托：利用事件冒泡机制，在最顶层触发事件的dom对象上绑定一个处理函数。在当有需要很多dom对象要绑定事件的情况下，可以使用事件委托。

e.srcElement || e.target: 获取事件发生时，最初的那个dom元素。

target.tagName：最初的那个dom元素的标签名字，例如：LI;

通过对元素属性的判断，例如标签名，ID ,CLASS等等，来执行不同的处理函数。

这样做比起每一个元素都绑定一个事件，然后为每一个事件再绑定一个函数效率要高很多。

上例：点击任何一个LI都会触发，document的onclick的事件，(注意这里的LI并没有绑定任何的onclick事件)，这样就可以理解为一种“委托”。

把事件交给document.让它去处理li点击后应该执行的语句。

转载于:https://www.cnblogs.com/lufy/archive/2012/05/05/2484900.html