事件流 - event flow

事件捕获是netSapce(网景)提出的
事件冒泡是IE提出的

事件流分类

  • 事件捕获
  • 处于目标阶段
  • 事件冒泡

事件冒泡、捕获的原型图


事件捕获（event capturing）： 当鼠标点击或者触发 dom 事件时（被触发 dom 事件的这个元素被叫作事件源），浏览器会从根节点 =>事件源（由外到内）进行事件传播。
事件冒泡（dubbed bubbling）： 事件源 =>根节点（由内到外）进行事件传播。

addEventListener 的第三个参数

addEventListener是 dom2 级事件,接收 3 个参数
元素.addEventListener(‘事件名称(string)’,’事件函数(Function)’,’冒泡或捕获(Boolean)‘)
第三个参数是一个布尔值;
默认为 false, 代表事件冒泡,
true,就变成了事件捕获

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <div id="div">12313</div>
        <button id="btn">移除监听事件</button>
    </div>
    <script>
        (function(){
            let odiv = document.getElementById('div');
            let flag = 0;
            odiv.addEventListener('click',function(e){
                if(flag) return ;
                // 处理函数
                flag =1;
                console.log(666)
            })
        })()

        (function(){
            let odiv = document.getElementById('div');
            let obtn = document.getElementById('btn');
            let  handler = function(){
                console.log(1231)
            }
            odiv.addEventListener('click',handler)
            obtn.addEventListener('click',()=>{
                odiv.removeEventListener('click',handler)
            })

        })()
    </script>
</body>
</html>

阻止冒泡

  • 在 IE 浏览器中需要通过 window.event.cancelBubble = true 阻止冒泡
  • 在普通浏览器中需要通过 event(事件对象).stopPropagation()阻止冒泡行为
1
2
3
4
5
6
box.addEventListener("click", function (event) {
  //普通浏览器
  event.stopPropagation();
  //ie浏览器
  event.cancelBubble = true;
});

阻止默认行为

  • 在 IE 浏览器中需要通过 window.event.returnValue = false 阻止默认行为
  • 在普通浏览器中需要通过 event(事件对象).preventDefault()阻止默认行为
1
2
3
4
5
box.addEventListener("click", function (event) {
  //普通浏览器
  event.preventDefault();
  event.returnValue = false;
});