事件委托(事件代理)

事件委托还有一个名字叫事件代理,JS高程上讲:事件委托就是利用事件冒泡,只制定一个事件处理程序,就可以管理某一类型的所有事件。

为什么要用事件委托

在JS中添加事件会先获取到dom节点再进行添加,获取dom的次数越多,引起浏览器重绘与重排的次数也就越多,就会延长整个页面的交互时间,这就是为什么减少DOM操作能提升网页的性能。而且每个事件处理函数都会占用内存,事件处理函数越多,内存占用就越大。

如果使用事件委托,就只会对事件委托的这一个dom进行操作,与dom只需要交互一次,这样就能大大的减少与dom的交互次数,提高性能;

事件委托的原理

事件委托是利用事件的冒泡原理来实现的,什么是事件冒泡呢?就是从触发事件的节点开始,然后一层一层向上传播事件,举个例子:页面上有以下节点树,div>ul>li>a;如果给最里面的a加一个click点击事件,那么这个事件就会一层一层的往外执行,执行顺序a>li>ul>div。有这样一个机制,那么我们给最外面的div加点击事件,那么里面的ul,li,a触发点击事件的时候,都会冒泡到最外层的div上,所以都会触发,这就是事件委托,委托它们父级代为执行事件。

判断目标节点

以上面节点树div>ul>li>a为例,假如在最外面的div添加了点击事件,但是div里面有多个a标签。比如:,当我们点击不同的a标签时,需要执行不一样的操作,那么我们应该怎么去做呢?

Event对象提供了一个属性叫target(IE:srcElement),该事件属性可以返回事件的目标节点(触发该事件的节点)。虽然不是真实的dom,但是target和普通节点一样都能获取节点的属性,以上面问题为例,我们可以通过判断target.id的值,来区别触发当前事件的节点,针对不同的节点执行不一样的操作。这样就达到和每一个节点都绑定一个事件同样的效果,且每次只执行一次dom操作。

你可能感兴趣的:(事件委托(事件代理))