zoukankan      html  css  js  c++  java
  • JS的事件冒泡和事件捕获

    DOM事件流三个阶段

    1.事件捕获:当鼠标触发DOM事件时,浏览器会从根节点由外到内进行事件传播。即触发子元素的事件,父元素会通过事件捕获的方式优先触发父元素的事件。

    2.目标阶段:正在处理事件。

    3.事件冒泡:与事件捕获相反,浏览器会从子节点由内到外进行事件传播。

    DOM事件流处理顺序:先捕获,再冒泡。

     

    具体区别

    通常在addEventListener方法的第三个参数中设置true则为事件捕获,false则为事件冒泡,默认为false。

    html代码:

        <div id="div1">
            <div id="div2">
            </div>
        </div>

    css代码:

    <style>
        #div1 {
            width: 500px;
            height: 500px;
            border: 1px solid #ffffff;
            background: blanchedalmond;
        }
    
        #div2 {
            width: 200px;
            height: 200px;
            border: 1px solid #ffffff;
            background: blue;
        }
    </style>

    js代码:

    <script>
        let div1 = document.getElementById("div1");
        let div2 = document.getElementById("div2");
        div1.addEventListener('click', function () {
            console.log('div1--捕获');
        }, true);
        div2.addEventListener('click', function () {
            console.log('div2--捕获');
        }, true);
        div1.addEventListener('click', function () {
            console.log('div1--冒泡');
        });
        div2.addEventListener('click', function () {
            console.log('div2--冒泡');
        });
    </script>

    点击div2打印出的结果:

     由此可证上述结论即:捕获先于冒泡;对于捕获而言,外层先于内层(div1先于div2打印);对于冒泡而言,内层先于外层(div2先于div1打印)。

    而我们期望的其实是对于冒泡事件,希望点击div2时仅仅只打印出div2--冒泡,修改js为:

    <script>
        let div1 = document.getElementById("div1");
        let div2 = document.getElementById("div2");
        div1.addEventListener('click', function (e) {
            console.log('div1--冒泡');
        });
        div2.addEventListener('click', function (e) {
            console.log('div2--冒泡');
            e.stopPropagation();
        });
    </script>

    此时点击div2打印的结果:

     兼容问题

    IE浏览器9以下不支持e.stopPropagation();来取消冒泡事件,在IE浏览器10版本以上中已经解决该问题:

     为了更好的兼容各个浏览器版本,对e.stopPropagation()事件进行一个判断:

    <script>
        let div1 = document.getElementById("div1");
        let div2 = document.getElementById("div2");
        div1.addEventListener('click', function (e) {
            console.log('div1--冒泡');
        });
        div2.addEventListener('click', function (e) {
            console.log('div2--冒泡');
            stopBubble();
        });
        function stopBubble (e) {
            if (e && e.stopPropagation) {
                e.stopPropagation();
            } else {
                window.event.cancelBubble = true;
            }
        }
    </script>
  • 相关阅读:
    web前端笔记1
    前端与后台交互所需技术
    js的HTML属性操作
    浮动塌陷
    前端与后端的交互(定义接口)
    AjAX(第3章 Ajax的简单例子(Ajax+PHP)
    AjAX(简单概要介绍)
    Bootstrap 学习之js插件(折叠(collapse)插件)
    Net core 项目 EF CodeFist 多重外键约束问题
    对VS 2017中ASP.NET Core项目解决:Add-Migration : 无法将“Add-Migration”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。
  • 原文地址:https://www.cnblogs.com/pipim/p/13424892.html
Copyright © 2011-2022 走看看