js 事件冒泡或事件捕获？

定义

事件传递有两种方式：冒泡 与 捕获

事件传递定义了元素事件触发的顺序。

如果你将 <p> 元素插入到 <div> 元素中，用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢？

在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件

在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发 ，然后再触发 <p> 元素的点击事件

Part.1  addEventListener() 方法

此方法共三个参数，而常用的只是前两个，现在我们重点来看第三个

语法：

        element.addEventListener(event, function, useCapture)

       

       第一个参数是事件的类型 (如 "click" 或 "mousedown")

       第二个参数是事件触发后调用的函数

       第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的

Part.2  例子

HTML

<template>
    <div class="home">
        <div id="myDiv">
            <p id="myP">点击段落，我是冒泡。</p>
        </div><br>
        <div id="myDiv2">
            <p id="myP2">点击段落，我是捕获。 </p>
        </div>
    </div>
</template>

JS

<script>
    export default {
        name: "home",
        mounted() {
             document.getElementById('myP').addEventListener("click", ()=> {
                alert('你点击了 P 元素！')
             }, false);
            document.getElementById('myDiv').addEventListener("click", ()=> {
                alert('你点击了 DIV 元素！')
            }, false);

            document.getElementById('myP2').addEventListener("click", ()=> {
                alert('你点击了 P2 元素！')
            }, true);
            document.getElementById('myDiv2').addEventListener("click", ()=> {
                alert('你点击了 DIV2 元素！')
            }, true);
        }
    };
</script>

CSS

<style scoped type="text/css">
.home {
    margin-top: 200px;
    padding-left: 800px;
    padding-right: 800px;
}
#myDiv, #myDiv2{
    background-color: coral;
    border: 1px solid;
    padding: 50px;
}
</style>

Part.3  Demo 展示