DOM中的事件委托

1. 事件委托定义

       事件委托指的是不在事件的发生地(直接DOM)上设置监听函数,而是在其父元素上设置监听函数,通过事件冒泡,父元素可以监听到被触发的子元素事件,通过判断事件发生元素DOM的类型,来作出不同的响应。当子元素有很多时,使用事件委托可以避免对特定的每个节点添加事件监听器,事件监听被添加到它们的父元素上,事件监听函数这是可以从子元素上冒泡上来的事件,找到是哪个子元素事件。

2. 事件委托举例

       最经典的就是ul和li标签的事件监听,比如我们在添加事件时候,采用事件委托机制,不会在li标签上直接添加,而是在ul父元素上添加。

       第一步:给父元素绑定事件。给元素ul添加绑定事件,通过addEventListener为点击事件click添加绑定。

       第二步:监听子元素的冒泡事件。这里默认是冒泡,点击子元素li会向上冒泡。

       第三步:找到是哪个子元素的事件。 通过匿名回调函数的参数event用来接收事件对象,通过event.target获取触发事件的目标。

3. 使用事件委托的好处

       事件委托技术可以避免对每个字元素添加事件监听器,减少操作DOM节点的次数,从而减少浏览器的重绘和重排,提高代码的性能。使用事件委托,只有父元素与DOM存在交互,其他的操作都是在JS虚拟内存中完成的,这样就大大提高了性能。

猜你喜欢

转载自www.cnblogs.com/princess-knight/p/9293575.html