事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标(target)。

事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。

用图示表示如下：

1、冒泡事件：

事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。通俗来讲就是，就是当设定了多个div的嵌套时；即建立了父子关系，当父div与子div共同加入了onclick事件时，当触发了子div的onclick事件后，子div进行相应的js操作，但是父div的onclick事件同样会被触发。

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>测试事件冒泡</title>

    <style>

        div{padding:40px;}

        #div1{background: #00B83F;}

        #div2{background: #2a6496}

        #div3{background: #93C3CF}

    </style>

    <script>

    window.onload=function (){

        var odiv1=document.getElementById("div1");

        var odiv2=document.getElementById("div2");

        var odiv3=document.getElementById("div3");

        function fdiv1(){

            alert("div1");

        }

        function fdiv2(){

            alert("div2");

        }

        function fdiv3(ev){

            alert("div3");

        }

        odiv1.onclick=fdiv1;

        odiv2.onclick=fdiv2;

        odiv3.onclick=fdiv3;

    }

    </script>

</head>

<body>

  <div id="div1">

      <div id="div2">

          <div id="div3"></div>

      </div>

  </div>

</body>

</html>

测试结果:点击div3时，依次弹出div3,div2,div1

2.阻止事件冒泡：

给div3的绑定事件改为。ev.canceBubble=true;

  function fdiv3(ev){

            var en=ev || event;

            en.cancelBubble=true;

            alert("div3");

        }

测试结果：点击div3时，只弹出div3

3、事件捕获：

从顶层元素到目标元素或者从目标元素到顶层元素，和事件冒泡是一个相反的过程。事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。

代码更改如下：

<script>

    window.onload=function (){

        var odiv1=document.getElementById("div1");

        var odiv2=document.getElementById("div2");

        var odiv3=document.getElementById("div3");

        odiv1.addEventListener("click",function(){

            alert("div1");

        },true);

        odiv2.addEventListener("click",function(){

            alert("div2");

        },true);

        odiv3.addEventListener("click",function(){

            alert("div3");

        },true);

    }

</script>

测试结果:点击div3时，依次弹出div1,div2,div3

结论：绑定事件时通过addEventListener函数，它有三个参数，第三个参数若是true，则表示采用事件捕获，若是false，则表示采用事件冒泡。

JS中的事件冒泡和事件捕获的更多相关文章

  1. JS中的事件绑定，事件捕获，事件冒泡以及事件委托，兼容IE

    转载请注明出处:http://www.cnblogs.com/zhangmingze/p/4864367.html   ● 事件分为三个阶段:   事件捕获 -->  事件目标 -->   ...

  2. JavaScript 进阶教程一 JavaScript 中的事件流 - 事件冒泡和事件捕获

    先看下面的示例代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Jav ...

  3. JS事件（事件冒泡和事件捕获）

    事件流:描述的是在页面中接收事件的顺序 事件冒泡:由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点(文档) 事件捕获:最不具体的节点先接收事件,而最具体的节点应该是最后接收事件 DOM中:用 ...

  4. js进阶 12-2 彻底弄懂JS的事件冒泡和事件捕获

    js进阶 12-2 彻底弄懂JS的事件冒泡和事件捕获 一.总结 一句话总结:他们是描述事件触发时序问题的术语.事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件.相反的,事件 ...

  5. JS事件冒泡与事件捕获怎么理解?

    在js中存在事件冒泡与事件捕获两种概念,这两个概念都是为了解决页面中事件流(事件发生顺序)的问题. 事件冒泡(dubbed bubbling) 事件冒泡我们从字面意思理解就是当用户行为触发我们页面的定 ...

  6. javascript中的事件冒泡、事件捕获和事件执行顺序

    谈起JavaScript的 事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的应用有 ...

  7. js 事件冒泡和事件捕获

    事件流:指的是网页中元素接受事件的顺序,它是一个概念,而不是具体的实际的东西 事件冒泡:指的是内层元素的事件,会触发包含着此元素的外层元素的事件,触发的顺序是:由内而外的 例如: <!DOCTY ...

  8. js高级：event，事件冒泡，事件捕获

    1.事件 浏览器客户端上客户触发的行为都称为事件 所有的事件都是天生自带的,不需要我们去绑定,只需要我们去触发. 通过 obj.事件名=function(){} 事件名:onmouseover 鼠标悬 ...

  9. 彻底弄懂JS的事件冒泡和事件捕获（不推荐阅读）

    由于搬去敌台了,好久没来博客园,今天无意中翻到有“误认子弟”的评论,这里特意做个说明. 本文中关于事件冒泡和事件捕获的描述和例子都是OK的,错就错在后面用jquery去展示了利用事件冒泡的例子有误,其 ...

  10. js事件（事件冒泡与事件捕获）

    事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念都是为了解决页面中事件流(事件发生顺序)的问题. <div id='aa' click='po'> <p id='bb' cli ...

随机推荐

  1. pycharm中使用git

    注册GitHub https://www.jb51.net/article/135606.htm pycharm中配置git https://www.cnblogs.com/feixuelove100 ...

  2. CentOS7 关闭防火墙[转]

    CentOS6关闭防火墙使用以下命令, /临时关闭 service iptables stop //禁止开机启动 chkconfig iptables off CentOS7中若使用同样的命令会报错, ...

  3. .Net Core内存回收模式及性能测试对比

    .NET Core 两种GC模式: Server GC / Workstation GC Server GC : 主要应用于多处理器系统,并且作为ASP.NET Core宿主的默认配置.它会为每个处理 ...

  4. 开发.NET Core NuGet包并实现CI/CD

    实际开发中我们需要对一些公共类库进行开发,并基于Jenkins进行CI/CD(CI:持续集成,CD:持续部署),其他项目通过NuGet引用.上文讲述了如何搭建本地NuGet服务器并发布NuGet包,这 ...

  5. android 中如何模拟back键

    主要是在使用Fragment时能够返回前一级,所以才找到了这些资料. 有两种方式可以实现,直接上代码 方法1: public void onBack(){ new Thread(){ public v ...

  6. Java面向对象之异常（自定义异常）

    一.基础概念 在自定义的程序中,如果有了问题.也可以像java中的异常一样,对问题进行描述. 注意:1.继承RuntimeException的异常,不需要进行处理.在执行过程中有异常会直接抛出. 2. ...

  7. Oracle中对多行查询结果进行拼接

    to_char(wmsys.wm_concat(to_char( st.col_name))) as new_name to_char: 将当前值转换成字符串类型; wmsys.wm_concat:拼 ...

  8. Python3之collections模块

    简介 collections是Python内建的一个集合模块,提供了许多有用的集合类. namedtuple namedtuple 是一个函数,它用来创建一个自定义的元组对象,并且规定了元组元素的个数 ...

  9. css ie浏览器兼容问题

    第一,IE6,不支持小于12px的盒子,任何小于12px的盒子,在IE6中看都大 解决办法很简单,就是将盒子的字号,设置小(小于盒子的高),比如0px. 1 height: 4px; 2 _font- ...

  10. 浅谈SLAM的回环检测技术

    什么是回环检测? 在讲解回环检测前,我们先来了解下回环的概念.在视觉SLAM问题中,位姿的估计往往是一个递推的过程,即由上一帧位姿解算当前帧位姿,因此其中的误差便这样一帧一帧的传递下去,也就是我们所说 ...