前端基础（二十六、JS事件机制）

最新推荐文章于 2024-02-13 13:30:45 发布

小鱼干儿er

最新推荐文章于 2024-02-13 13:30:45 发布

阅读量121

点赞数

分类专栏：前端学习文章标签：事件处理机制 js 前端

本文链接：https://blog.csdn.net/qq_45689821/article/details/113931460

版权

前端学习专栏收录该内容

39 篇文章 2 订阅

订阅专栏

二十六、JS事件机制

事件冒泡
事件捕获
阻止事件冒泡
同时触发事件冒泡和事件委托

事件冒泡

addEventListener("事件",function(){})：用于监听事件

<body>
    <div id="div1" style="width: 300px; height: 300px; background-color: cornflowerblue; text-align: center;">div1
        <div id="div2" style="width: 200px; height: 200px; background-color: coral;margin: 25px auto;text-align: center;">div2
            <div id="div3" style="width: 100px; height: 100px; background-color: lightpink; text-align: center; line-height: 100px;margin: 25px auto;">
                div3
            </div>
        </div>
    </div>
    <script>
        var oDiv1 = document.querySelector("#div1");
        var oDiv2 = document.querySelector("#div2");
        var oDiv3 = document.querySelector("#div3");

        //事件冒泡
        oDiv1.addEventListener("click",function(){
            console.log("div1");
        },false);
        oDiv2.addEventListener("click",function(){
            console.log("div2");
        },false);
        oDiv3.addEventListener("click",function(){
            console.log("div3");
        },false);//3 2 1
    </script>

点击div3，输出为：

如图，事件冒泡是指当一个元素接收到事件后，会将事件不断传递给父元素，直到window。

事件冒泡仅传递事件，不包括绑定的事件函数，如上面的例子中，div3绑定了点击事件，如果div2和div1没有绑定点击事件，div3的点击事件是无法传递到div2和div1的，也就是div2和div1点击后无反应。
事件监听函数后面的参数为 false 或不写时触发事件冒泡。

事件捕获

将上面事件冒泡例子中的 false 改为 true ，即可触发事件捕获：

<body>
    <div id="div1" style="width: 300px; height: 300px; background-color: cornflowerblue; text-align: center;">div1
        <div id="div2" style="width: 200px; height: 200px; background-color: coral;margin: 25px auto;text-align: center;">div2
            <div id="div3" style="width: 100px; height: 100px; background-color: lightpink; text-align: center; line-height: 100px;margin: 25px auto;">
                div3
            </div>
        </div>
    </div>
    <script>
        var oDiv1 = document.querySelector("#div1");
        var oDiv2 = document.querySelector("#div2");
        var oDiv3 = document.querySelector("#div3");

        // 事件冒泡
        // oDiv1.addEventListener("click",function(){
        //     console.log("div1");
        // },false);
        // oDiv2.addEventListener("click",function(){
        //     console.log("div2");
        // },false);
        // oDiv3.addEventListener("click",function(){
        //     console.log("div3");
        // },false);//3 2 1

        // 事件捕获
        oDiv1.addEventListener("click",function(){
            console.log("div1");
        },true);
        oDiv2.addEventListener("click",function(){
            console.log("div2");
        },true);
        oDiv3.addEventListener("click",function(){
            console.log("div3");
        },true);//1 2 3
    </script>
</body>

点击div3：

如图，点击div3后输出的顺序和事件冒泡时相反。
事件捕获是指父元素将事件不断传递给子元素，直到最里层的子元素的过程。

同理，事件捕获也只传递事件，而不传递绑定的事件函数。

阻止事件冒泡

event.stopPropagation() ：阻止事件冒泡

        oDiv1.addEventListener("click",function(){
            console.log("div1");
        },false);
        oDiv2.addEventListener("click",function(){
            console.log("div2");
        },false);
        oDiv3.addEventListener("click",function(){
            console.log("div3");
            event.stopPropagation();//阻止事件冒泡
        },false);//3 2 1

阻止事件冒泡后，点击div3：

同时触发事件冒泡和事件委托

同时触发事件冒泡和事件委托时，优先显示事件委托：

<body>
    <div id="div1" style="width: 300px; height: 300px; background-color: cornflowerblue; text-align: center;">div1
        <div id="div2" style="width: 200px; height: 200px; background-color: coral;margin: 25px auto;text-align: center;">div2
            <div id="div3" style="width: 100px; height: 100px; background-color: lightpink; text-align: center; line-height: 100px;margin: 25px auto;">
                div3
            </div>
        </div>
    </div>
    <script>
        var oDiv1 = document.querySelector("#div1");
        var oDiv2 = document.querySelector("#div2");
        var oDiv3 = document.querySelector("#div3");

        // 事件冒泡
        oDiv1.addEventListener("click",function(){
            console.log("div1");
        },false);
        oDiv2.addEventListener("click",function(){
            console.log("div2");
        },false);
        oDiv3.addEventListener("click",function(){
            console.log("div3");
            //event.stopPropagation();//阻止事件冒泡
        },false);//3 2 1

        // 事件捕获
        oDiv1.addEventListener("click",function(){
            console.log("div1");
        },true);
        oDiv2.addEventListener("click",function(){
            console.log("div2");
        },true);
        oDiv3.addEventListener("click",function(){
            console.log("div3");
        },true);//1 2 3

    </script>
</body>