从头说起
如果需要给html中的某个dom绑定事件，有三种常用方法：
1.直接写在dom的事件钩子上
<span id="target" onClick="handleClick()">Click me</span>
这种方法破坏了dom和js分离的规则，所以不太被推荐，如果面试官让你做题，尽量别这么写，他们会单纯地以为你很low
2.通过js代码注册事件
var target = document.getElementById('target');
target.onclick = function() {
// do something...
}
这种方式会比第一种方式更有“仪式感”，但是缺点也显而易见，只能绑定一次事件，下次绑定会清空上次绑定的事件
3.通过addEventListener来注册事件
var target = document.getElementById('target');
target.addEventListener('click', function() {
// do something...
}, false); // 如果不加第三个参数，默认是false
这种方式最为灵活，也是被普遍建议采用的事件绑定方式，那么问题来了，这第三个参数是用来干嘛的？
由于浏览器有事件冒泡的机制存在，当你点击一个dom，点击事件会沿着dom树结构像上或者下进行传播，如果你不想被其他相关节点相应到此次点击事件，那么就需要传说中的“阻止事件冒泡”了
假设div、p、span元素都有click事件的响应逻辑，
- 当第三个参数为
false时（不传参数时，默认也是这种冒泡方式），点击<span />后，接下来<p />会响应此次事件，然后是<div />，既事件从上往下冒泡，如下图
propagation-false.png
当第三个参数为true时，点击<span />后，首先响应事件的是最底层的<div />，随后是<p />，最后才是你点击的<span />，如下图
propagation-true.png
__
其他小贴士
- 如何分辨事件是由冒泡产生的还是操作产生的？
在事件处理函数中，可以通过
function handleClick (evt) {
if (evt.phase === 1) {
// 第三个参数为true时所导致的冒泡
} else if (evt.phase === 3) {
// 第三个参数为false时所导致的冒泡
} else if (evt.phase === 2) {
// 发生在当前dom的事件
}
}
- 如何阻止事件冒泡？
在事件处理函数中，可以通过
function handleClick(evt) {
evt.stopPropagation();
// 或者
evt.stopImmediatePropagation();
}
上面的阻止冒泡不会阻止本dom本事件的其他事件处理函数的执行；
下面的阻止冒泡会导致后续绑定在该dom的其他事件处理函数不再执行；
网友评论