事件委托机制原理
利用事件冒泡传播机制完成。(mouseenter、mouseleave等不会冒泡)
什么是事件冒泡?
事件冒泡:结构上嵌套关系的元素(非视觉上),会存在事件冒泡的功能,即同一事件,自子元素冒泡向父元素。
例:
假如界面中存在这样一个嵌套关系:
<div id="red">
<div id="blue">
<div id="green">
</div>
</div>
</div>
设置样式便于观察:
拿到三个div对应的dom元素,为其添加点击事件:
var red = document.getElementById('red');
var blue = document.getElementById('blue');
var green = document.getElementById('green');
red.onclick = function () {
console.log('red onclick');
}
blue.onclick = function () {
console.log('blue onclick');
}
green.onclick = function () {
console.log('green onclick');
}
当点击红色区域,即最外层div时,该div嵌套在内的元素事件(即子元素事件)是不会被触发的:
此时只触发red事件。
当点击蓝色区域,其父元素red也有点击事件,所以此时会因为事件冒泡机制,在触发blue点击事件后会触发red的点击事件:
同理,当点击绿色区域,其父元素red和blue点击事件也会被触发:
利用这个特性,我们可以为一个目标元素(事件源)的父元素添加一个触发事件,这样就无需给目标元素添加事件,统一绑定到其父元素身上;即把目标元素的事件委托到其父元素身上。
应用场景:
当一个容器内有很多元素都要为同一件事件绑定方法,这时只需要给外层容器的该事件绑定这个方法,当里层元素触发这个事件时,会通过事件冒泡传播机制传到最外层容器,触发外层容器绑定的方法。在方法执行时,只需根据判断事件源的不同而做不同的事情。
优势:
- 利用事件委托大大提高了性能。
- 适合动态元素的事件绑定,新添加的子元素会有监听函数,也可以有事件触发机制。