以前在学习JavaScript的事件流的时候,一直认为捕获与冒泡的作用不太大,所以仅仅只是了解了一下,并且还有些不太确定的理解,在上个星期的面试中,被考官问了一个在ul中给100个li添加事件,我竟然傻傻的循环遍历有所li。所以希望通过今天将知识总结一下,来巩固自身。
DOM事件流:事件流分为三个阶段: 事件捕获阶段、处于目标阶段、事件冒泡阶段。
事件捕获阶段: 由根元素(由外向内)一直向内传递直到捕获到目标元素,截获事件。
处于目标阶段:实际目标接收事件。
事件冒泡阶段: 再由目标元素(由内向外)一直向外(直到根元素)传递事件。
接着请看代码:
var parent = document.getElementsByClassName('parent')[0];
var child = document.getElementsByClassName('child')[0];
parent.addEventListener('click', function (e) {
console.log('bubble')
},false)
parent.addEventListener('click', function (e) {
console.log('capture')
},true)
child.onclick = function (e) {
console.log(e.target.className)
}
<!-- html -->
<div class=