2.addEventListener事件传递过程
上一节中我们讲到了什么是事件以及常见的三种绑定事件的方法https://blog.csdn.net/qq_33345511/article/details/102680164,今天我们来具体聊一聊addEventListener方法事件传递过程
DOM0级:document.getElementById(“btn”).onclick = function(){};
DOM2级:document.getElementById("btn").addEventListener('click',function(){},false)
在DOM2级事件中规定事件流包括三个阶段:
捕获阶段(event capturing):从根节点开始顺序而下,检测每个节点是否注册了事件处理过程。如果注册了事件处理程序,并且useCapture为true,则调用该事件处理程序(IE中无此阶段)。
目标阶段(正常事件派发阶段):触发在目标对象本身注册的事件处理程序。
冒泡阶段(dubbed bubbling):从目标节点到根节点,检测每个节点是否注册了事件处理程序,如果注册了事件处理程序,并且useCapture为false,则调用该事件处理程序。
事件冒泡与事件捕获是为了解决页面中事件流(事件发生顺序)问题。如图是事件捕获和事件冒泡的过程。
我们用代码来理解捕获和冒泡(运行在IE浏览器上会报错):
在button上点击鼠标,事件流是这样的:
捕获阶段:检测document 是否有useCapture为true的事件处理函数,若有,则执行该程序,同样的处理html ,body到div。
目标阶段:在div处,发现div是鼠标点击的节点,所以这里为目标阶段,若有事件处理程序则执行该程序,此时不论useCapture是否为true(此时会输出1)。
冒泡阶段:继续执行,在body处检测是否有useCapture为false的事件处理函数,若有则执行该程序 ,同样的处理HTML,document节点。
改变代码顺序:
解决兼容性问题(例子有点失败,在IE11上兼容addEventListener,而在IE78上又不支持getElementByClassName,懒得再去调试了):
移除事件(*****)
我们直接来看代码:
总结:
1)true(捕获)的触发顺序总是在false(冒泡)之前
2)如果多个都为true ,则外层的触发先于内层
3)如果多个都为false,则内层的触发先于外层
4)时间绑定后,该绑定代码作用域的变量就都保留下来,不会被JS引擎回收,可能会引起占用大量内存的问题,removeEventListener无法删除匿名函数的事件处理,只有在HTML元素(如:按钮)去除之后,该内存才可能得到回收
附:案例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>移除事件</title>
</head>
<body>
<button type="button" class="mui-btn">按钮1</button><br /><br />
<button type="button" class="mui-btn">按钮2</button><br />
<script type="text/javascript">
var aBtn = document.getElementsByClassName("mui-btn");
var arr = [aBtn[0], aBtn[1],document.body,document];
// 点击按钮,弹出绑定事件对应的数组下标
for (var i = 0; i < arr.length; i++) {
// 自执行函数(闭包)
(function(index){
// 普通方式添加事件
// arr[i].onclick = function() {
// console.log(this+index+"普通方式添加事件");
// }
})(i);
// 事件绑定 冒泡
// arr[i].addEventListener('click',function(){
// console.log(this)
// },false);
}
// ES6 {}块级作用域,在{}中定义函数,在函数中用块级作用域内的数据=>闭包
for(let i=0;i<arr.length;i++){
// 事件绑定 冒泡
// arr[i].addEventListener('click',function(){
// console.log(this+"事件绑定之冒泡"+i);
// },false);
// 事件绑定 捕获
arr[i].addEventListener('click',function(){
console.log(this+"捕获"+i)
},true)
}
</script>
</body>
</html>