事件触发三阶段
window 往事件触发处传播，遇到注册的捕获事件会触发
传播到事件触发处时触发注册的事件
从事件触发处往 window 传播，遇到注册的冒泡事件会触发
事件触发一般来说会按照上面的顺序进行，但是也有特例，如果给一个目标节点同时注册冒泡和捕获事件，事件触发会按照注册的顺序执行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="node"></div>
<script>
var node = document.getElementById('node');
//@event表示事件类型
//@function触发的回调函数
//@useCapture默认为false,表示事件句柄在冒泡阶段执行，若为true则在捕获阶段执行
// element.addEventListener(event, fn, useCapture)
//其中第三个参数除了是布尔值，还可以是一个对象，对对象参数来说，可以使用以下几个属性：
/*
- capture，布尔值，和 useCapture 作用一样
- once，布尔值，值为 true 表示该回调只会调用一次，调用后会移除监听
- passive，布尔值，表示永远不会调用 preventDefault
*/
// 以下会先打印冒泡然后是捕获
node.addEventListener('click', event => {
console.log('冒泡')
}, false)
node.addEventListener('click', event => {
console.log('捕获')
}, true)
</script>
</body>
</html>
一般来说，我们只希望事件只触发在目标上，这时候可以使用 stopPropagation 来阻止事件的进一步传播。通常我们认为 stopPropagation 是用来阻止事件冒泡的。
stopImmediatePropagation 同样也能实现阻止事件，但是还能阻止该事件目标执行别的注册事件。
node.addEventListener(
'click',
event => {
event.stopImmediatePropagation()
console.log('冒泡')
}, false)
// 点击 node 只会执行上面的函数，该函数不会执行
node.addEventListener(
'click',
event => {
console.log('捕获 ')
}, true)
参考博客：https://blog.csdn.net/MeiLuan_yahoho/article/details/87922819
网友评论