DOM - Event Mechanism and Event Chain

事件机制

JavaScriptthree stages of events：捕获阶段、目标阶段和冒泡阶段.

        1、先捕获,后目标,再冒泡,只能有一个阶段触发程序执行,比如捕获阶段触发了到了冒泡阶段就不再触发

        2、事件经过所有元素都没有被处理,这个事件消失

        3、事件传递的过程 只跟文档树的结构有关系 跟界面显示的层叠效果没有任何关系

事件捕获:结构上（非视觉上）嵌套关系的元素,会存在事件捕获的功能,即同一事件,自父元素捕获至子元素（事件源元素）.（自顶向下）

事件冒泡：结构上（非视觉上）嵌套关系的元素,会存在事件冒泡的功能,即同一事件,自子元素冒泡向父元素.（自底向上）

事件链

在JavaScriptThe triggering of the event will execute three stages,From capture to target to bubbling;That is, from top to bottom,from bottom to top,也就形成了一个事件链.

 

在事件链中,It can also be set to determine whether the event is triggered in the capture phase or in the bubbling phase.

比如通过addEventListener绑定事件,如果把第三个参数设置为true,It means that the event is executed when it is captured,如果为false,Indicates that the event is executed during the bubbling phase.Events are fired during the bubbling phase by default.

     <div class="box1">
        <div class="box2">
            <div class="box3"></div>
        </div>
    </div>

    <script>

        var box1 = document.querySelector(".box1")
        var box2 = document.querySelector(".box2")
        var box3 = document.querySelector(".box3")
        box1.addEventListener("click",() => {
            console.log(123);
        },true)
        box1.addEventListener("click",() => {
            console.log(456);
        },false)
        box2.addEventListener("click",() => {
            console.log(11111);
        })
        box3.addEventListener("click",() => {
            console.log(222222);
        })

    </script>

阻止 事件冒泡

To prevent an event from being delivered ,唯一的方式就是阻止事件冒泡：

        1）事件对象调用stopPropagation(), Prevents bubbling to the parent element

<div class="box1">
        <div class="box2">
            <div class="box3"></div>
        </div>
    </div>

    <script>

        var box1 = document.querySelector(".box1")
        var box2 = document.querySelector(".box2")
        var box3 = document.querySelector(".box3")
        box1.addEventListener("click", () => {
            console.log(123);
        },true)

        box1.addEventListener("click", () => {
            console.log(123222);
        },false)
       
        box3.addEventListener("click", () => {
            // 阻止事件冒泡
            e.stopPropagation()
            console.log(11111);
        })
     </script>

 The above code if not calledstopPropagation()阻止事件冒泡,Then the print result should be 123   11111  123222;但是box3中调用stopPropagation()之后,阻止了box3events bubble up,因此box1Events executed during the bubbling phase are not fired,So it won't print123222.

2）事件对象调用stopImmediatePropagation(), Blocks program delivery execution bubbling

    <div class="box1">
        <div class="box2">
            <div class="box3"></div>
        </div>
    </div>

    <script>

        var box1 = document.querySelector(".box1")
        var box2 = document.querySelector(".box2")
        var box3 = document.querySelector(".box3")
        box1.addEventListener("click", () => {
            console.log(123);
        },true)

        box1.addEventListener("click", () => {
            console.log(123222);
        },false)
       
        box3.addEventListener("click", () => {
            // Blocks program delivery execution bubbling
            e.stopImmediatePropagation()
            console.log(11111);
        })
     </script>

3） 还有一种是IE8and the method used by lower version browsers below：事件调用cancelBubble 并赋值为false,比如： e.cancelBubble = false

阻止默认事件

默认事件——表单提交,a标签跳转,右键菜单等等;When want to prevent default events,可以调用preventDefault（）来阻止

比如当有一个a标签时,When you don't want to jump to a web page after clicking,就可以用preventDefault（）：

    <a href="http://www.baidu.com" id="a1">点我</a>

    <script>

        var a1 = document.querySelector("#a1")
        a1.addEventListener("click",(e) => {
 
            // 阻止系统默认事件
            e.preventDefault()  //But can't stop the bubbling
        })

此时,你点击a标签之后,It will not jump to the webpage you set.