事件委托（提高页面性能之一）

最新推荐文章于 2019-07-26 09:56:27 发布

原创最新推荐文章于 2019-07-26 09:56:27 发布 · 304 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#事件委托

js 同时被 2 个专栏收录

5 篇文章

订阅专栏

事件

1 篇文章

订阅专栏

本文探讨了在前端开发中，通过将事件监听器绑定在父元素而非每个子元素上来提高网页性能的方法。具体介绍了两种事件绑定方式：为每个元素单独绑定事件与仅在父元素上绑定事件监听器。后者通过事件冒泡机制捕获目标元素，从而减少DOM操作，实现性能优化。

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

举例：一个公司的前台帮员工收快递？还是一个一个员工自己出来收快递？哪个效率比较高呢？

答案：前台帮员工收快递

运用到我们页面上

<body>
    <ul id="ul">
        <li>1111</li>
        <li>2222</li>
        <li>3333</li>
    </ul>
</body>

平常做法每个元素上都绑定点击事件：比较耗性能(不推荐)

var ul = document.getElementById('ul');
var li = ul.getElementsByTagName('li');
for(var i = 0; i<li.length; i++){
    li[li].onclick=function(){
        alert('111')
    }
}

给公共父级元素添加一个事件：优化性能（推荐）

var ul = document.getElementById('ul');
ul.onclick = function(ev){
    var ev = ev || window.event;
    var target = ev.target || ev.srcElement;
    if(target.nodeName.toLowerCase() == 'li'){
        alert(target.innerHTML)
    }
}

给页面上的dome操作也越少越好，所以绑定一个元素比绑定多个元素的性能要好