• 冒泡事件：

    定义：当多个Dom元素互相嵌套的时候，一个元素触发了某个事件（例如Click事件），那么嵌套此事件的所有元素都会被触发一次Click事件，注意：只会触发他的直系亲属元素，而与其自己，父级，爷级等等同级的亲戚集是不会触发的

  • 捕获事件：

    *定义：** 同冒泡事件含义相似，只是将冒泡事件的触发顺序倒过来即可

  • DOM事件流

    元素的触发流程分为三个阶段

    1. 捕获阶段：先从祖先级一直找到触发的源元素（所有元素都触发了相同事件）

    2. 目标阶段：找到原元素，然后触发源元素的事件

    3. 冒泡阶段：然后重新流回祖先元素，又触发了一遍相同事件

  • 思考： 按照上面的事件流，岂不是一个元素会触发两次事件？那这不是很奇怪吗：其实在我们一般开发过程中都是用Jquery 的 on 方法来绑定的（推荐使用），绑定后，只会触发冒泡事件。那么什么时候会涉及到这个捕获阶段呢，在原生的javascript中，就会有此方法的使用，且看下面详解

  • 详解 addEventListener/removeEventListener

    作用： 原生的事件绑定方法

    ​
    // type:事件类型,不含"on",比如"click"、"mouseover"、"keydown";
    // 而attachEvent的事件名称,含含"on",比如"onclick"、"onmouseover"、"onkeydown";
    // listener:事件处理函数
    // useCapture是事件冒泡,还是事件捕获(true),默认false,代表事件冒泡类型
    addEventListener(type, listener, useCapture);

    特点：

    1. 一个元素可以同时绑定两种类型（捕获/冒泡）

    2. 一个同种类型的元素重复绑定同一个事件函数，只绑定一次

    3. 一个元素可以重复绑定多个不同的函数，且是叠加而非覆盖

  • 触发流程：

    1. 首先源目标触发了事件

    2. 开始捕获阶段，将其直系亲属（类型为捕获）的事件触发

    3. 到达源元素，触发事件方法，如果重复绑定多个，则按绑定顺序触发（源元素的类型其实没有影响）

    4. 然后开始冒泡排序，将其直系亲属（类型为冒泡）的事件触发

    <script>

    window.onload = function(){
            var outA = document.getElementById("outA");  
            var outB = document.getElementById("outB");  
            var outC = document.getElementById("outC");  

        // 目标(自身触发事件,是冒泡还是捕获无所谓)
            outC.addEventListener('click',function(){alert("target2");},true);
            outC.addEventListener('click',function(){alert("target1");},true);

        // 事件冒泡
            outA.addEventListener('click',function(){alert("bubble1");},false);
            outB.addEventListener('click',function(){alert("bubble2");},false);

        // 事件捕获
            outA.addEventListener('click',function(){alert("capture1");},true);
            outB.addEventListener('click',function(){alert("capture2");},true);
        };

</script>

<body>
        <div id="outA" style="width:400px; height:400px; background:#CDC9C9;position:relative;">
            <div id="outB" style="height:200; background:#0000ff;top:100px;position:relative;">
                <div id="outC" style="height:100px; background:#FFB90F;top:50px;position:relative;"></div> 
            </div>
        </div>
    </body>
    ​
    点击outC的时候，打印顺序是:capture1-->capture2-->target2-->target1-->bubble2-->bubble1

    结论：捕获阶段的处理函数最先执行，其次是目标阶段的处理函数，最后是冒泡阶段的处理函数。目标阶段的处理函数，先注册的先执行，后注册的后执行

  • 如何解决冒泡/捕获事件的影响

    目的： 我们很清楚，解决冒泡和捕获事件的影响，只需要在源元素触发完事件之后停止事件的传播即可

    方式：

    1. event.stopPropagation(); 只阻止了冒泡事件， 默认行为没有阻止（超链接a嵌套按钮，依然会跳转）

    2. event.preventDefault(); 只阻止了默认事件，冒泡事件没有阻止（超链接a嵌套按钮，不跳转，但会触发点击事件）

    3. return false; 冒泡事件和默认事件都阻止

    <script>

    window.onload = function(){
            var outA = document.getElementById("outA");  
            var outB = document.getElementById("outB");  
            var outC = document.getElementById("outC");  

        // 目标
            outC.addEventListener('click',function(event){
                alert("target");
                event.stopPropagation();
            },false);

        // 事件冒泡
            outA.addEventListener('click',function(){alert("bubble");},false);

        // 事件捕获
            outA.addEventListener('click',function(){alert("capture");},true);      

    };

</script>

<body>
        <div id="outA" style="width:400px; height:400px; background:#CDC9C9;position:relative;">
            <div id="outB" style="height:200; background:#0000ff;top:100px;position:relative;">
                <div id="outC" style="height:100px; background:#FFB90F;top:50px;position:relative;"></div> 
            </div>
        </div>
    </body>
    capture-->target，不会打印出bubble。因为当事件传播到outC上的处理函数时，通过stopPropagation阻止了事件的继续传播，所以不会继续传播到冒泡阶段,当然如果此方法放到了捕获中，那么就只会打印出capture了

  • 注意点：

    今天用 on 绑定的时候，div 嵌套按钮，按钮里的事件触发带有ajax的请求，结果点击确实进入了按钮事件方法中，但是还没有进入回调函数，就跳转到div的点击事件方法中了，然后再跳回回调方法中，采用了以下方法解决

    ​
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>webApi测试</title>
        <script src="~/js/jquery.min.js"></script>
    </head>
    <body>
        <div id="first">
        </div>
        <div id="outA" style="width:400px; height:400px; background:#CDC9C9;position:relative;">
            <div id="outB" style="height:200; background:#0000ff;top:100px;position:relative;">
                <div id="outC" style="height:100px; background:#FFB90F;top:50px;position:relative;"></div>
            </div>
            </div>
        </div>
    </body>
    </html>
    ​
    <script>
        $(function () {
    ​
            $("#outC").on ("click",function () { alert("C")});
            $("#outB").on ("click",function () { alert("B") });
            $("#outA").on("click", function () { alert("A") });
            $("#outD").on("click", function () { alert("D") });
    ​
            $("#first").on("click", function () { debugger; alert("最外层div") });
            $("#routeTest").on("click", ajaxFunction);
    ​
            function ajaxFunction() {
                debugger;
                //event.cancelBubble = true;//取消事件的冒泡，效果同下
                //return false//此方法会导致此方法直接结束，因此不能直接使用
                event.stopPropagation();  
                $.ajax({
                    url: "/Course/GetCourseByRoute?temp"+Date.parse(new Date()),
                    type: 'get',
                    success: function (res) {
                        debugger;
                        alert(res);
                    }
                });
            }
        });
    </script>

javascript冒泡事件详解的更多相关文章

  1. Js冒泡事件详解及阻止

    Js冒泡机制是指如果某元素定义了事件A,如click事件,如果触发了事件之后,没有阻止冒泡事件,那么事件将向父级元素传播,触发父类的click函数. 如下例所示: <html>     & ...

  2. javascript之事件详解2

    1.事件对象: 在触发DOM事件的时候都会产生一个对象. 2.事件对象event: (1).type:获取事件类型 (2).target:获取事件目标 (3).stopPropagation():阻止 ...

  3. javaScript -- touch事件详解（touchstart、touchmove和touchend）

    HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...

  4. JavaScript——event事件详解

    1.事件对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 什么时候会产生Event 对象呢? 例如: 当用户单击某个元素的时候,我们给这个元 ...

  5. JavaScript事件详解-jQuery的事件实现（三）

    正文 本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...

  6. JavaScript事件详解-Zepto的事件实现（二）【新增fastclick阅读笔记】

    正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...

  7. JavaScript事件详解-zepto的事件实现

    zepto的event 可以结合上一篇JavaScript事件详解-原生事件基础(一)综合考虑源码暂且不表,github里还有中文网站都能下到最新版的zepto.整个event模块不长,274行,我们 ...

  8. JAVASCRIPT事件详解-------原生事件基础....

    javaScirpt事件详解-原生事件基础(一)   事件 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间,通过监听特定事件的发生,你能 ...

  9. JavaScript中的鼠标滚轮事件详解

    JavaScript中的鼠标滚轮事件详解/*Firefox注册事件*/ ~~~Firefox: addEventListener('DOMMouseScroll', handler, false)if ...

随机推荐

  1. SpringMvc+ajax跨域请求时，出现options类型的请求并返回403的解决方案

    在使用 $.ajax({ url:'http://127.0.0.1:8081/rest/ccxxx/xxxx', type:'POST', dataType:"json", co ...

  2. Spring Cloud(7)：事件驱动（Stream）分布式缓存（Redis）及消息队列（Kafka）

    分布式缓存(Redis)及消息队列(Kafka) 设想一种情况,服务A频繁的调用服务B的数据,但是服务B的数据更新的并不频繁. 实际上,这种情况并不少见,大多数情况,用户的操作更多的是查询.如果我们缓 ...

  3. 使用 ServiceStack.Text 序列化 json

    相信做 .net 开发的朋友经常会遇到 json 序列化这样的需要,今天发篇文章总结下自己使用 ServiceStack.Text 来序列化 json.它的速度比 Newtonsoft.Json 快很 ...

  4. Android studio之广播监听接收短信

    一． 在清单文件中(AndroidManifest.xml)添加短信权限 这里我用的android studio版本是3.3的 <uses-permission android:name=&qu ...

  5. 删除Excel表格中一堆英文中的汉字

    昨天需要处理一个Excel文件,删除一堆英文里的汉字,开始搜了下方法,没找到,然后手动一个多小时,弄了一半吧也就,结果电脑卡了,忘了保存,就白做了...不知道为啥这次没有自动保存,所以,重要的事说三遍 ...

  6. 【miscellaneous】【ARM-Linux开发】ARM平台基于嵌入式Linux Gstreamer 使用

    1). 简介 随着ARM平台性能的日益强大和嵌入式设备的发展,对于多媒体处理如音视频播放,摄像头,流媒体处理等需求也日益增多,本文就通过几个基于嵌入式Linux下多媒体应用的示例来简单展示下使用Gst ...

  7. Swagger API文档

    Swagger API文档集中化注册管理   接口文档是前后端开发对接时很重要的一个组件.手动编写接口文档既费时,又存在文档不能随代码及时更新的问题,因此产生了像swagger这样的自动生成接口文档的 ...

  8. gcc/clang编译带pthread.h头文件的源码时需要的参数

    今天敲了一个小程序,编译时出现错误:undefined reference pthread_create 原来由于pthread库不是Linux系统默认的库,连接时需要使用库libpthread.a, ...

  9. Eureka如何剔除已经宕机的节点

    同一个服务部署了多个实例,在通过网关调用时会随机调用其中一个.但是,当某个服务挂掉之后,依然在注册中心中,依然会随机被调用到,调用时便会超时报错.(主要是开发测试或者演示时需要立即将失效的从注册中心剔 ...

  10. PCL学习（四）点云转换为网格

    Remove needless points compute normals surface reconstruction get texture(param 4096 basic) save pro ...