JavaScript之事件委托和事件代理

最新推荐文章于 2024-03-13 22:16:24 发布

builder2991

最新推荐文章于 2024-03-13 22:16:24 发布

阅读量752

点赞数 1

分类专栏： javascript 文章标签：事件委托事件处理 javascript

本文链接：https://blog.csdn.net/low666/article/details/104848664

版权

事件委托（也称事件代理）是JavaScript性能优化的一种手段，利用事件冒泡原理，只设置一个事件处理程序来管理同一类型的多个事件。通过减少DOM操作次数，提升页面性能。本文介绍了事件委托的概念、意义、原理，以及事件冒泡和捕获的过程，并讨论了事件委托的优点和适用场景。

摘要由CSDN通过智能技术生成

JavaScript之事件委托和事件代理

事件委托概念：

事件委托还有一个名字叫事件代理，JS高程上讲：事件委托就是利用事件冒泡，只制定一个时间处理程序，就可以管理某一类型的所有事件。
简单的说就是原本需要一个一个去处理的事件，现在只需要一个总的事件去管理他们即可 （自己理解的，可能有偏差）

用事件委托的意义

在JavaScript中，添加到页面上的事件处理次数将关系到页面的整体运行性能，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间，因此减少DOM操作是性能优化的主要思想之一。
每个函数都是一个对象，是对象就会占用内存，对象越多，内存占用率越大。如果要用事件委托，就会将所有的操作放到js程序里面，只对它的父级(如果只有一个父级)这一个对象进行操作，与dom的操作就只需要交互一次，这样就大幅度的减少与dom的交互次数，提高性能。

事件委托的原理

事件委托是利用事件的冒泡原理来实现的，就是事件从最深的节点开始，然后逐步向上传播事件。
例如：页面上有这么一个节点树，给最里面的节点加一个onclick事件，那么这个事件就会一层一层的往外执行。如果给最外面的div加点击事件，那么里面的节点做点击事件的时候，都会冒泡到最外层的节点上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。