事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标(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. jQuery基础入门

    一.什么是 jQuery Jquery它是javascript的一个轻量级框架,对javascript进行封装,它提供了很多方便的选择器.供你快速定位到需要操作的元素上面去.还提供了很多便捷的方法. ...

  2. layer模态窗简单使用

    layer.open({ type: 1,//模态窗种类 skin: "layui-layer-rim", title: "编辑信息", area: [&quo ...

  3. 如何防止Unity3D代码被反编译？

    欢迎访问网易云社区,了解更多网易技术产品运营经验. 网易云易盾移动游戏安全技术专家陈士留在2018年Unity技术路演演讲内容中对这个问题有过比较详细的介绍,摘录如下: 防止Unity3D代码被反编译 ...

  4. 201621123023《Java程序设计》第1周学习总结

    第1周-Java基本概念 一.本周学习总结 关键词:java发展历史.JVM/JRE/JDK.编辑器 java是一门面向对象的语言,相比于C语言我感觉java更方便.java是运行在JVM上的,不同的 ...

  5. IO模型《七》selectors模块

    一 了解select,poll,epoll IO复用:为了解释这个名词,首先来理解下复用这个概念,复用也就是共用的意思,这样理解还是有些抽象, 为此,咱们来理解下复用在通信领域的使用,在通信领域中为了 ...

  6. Ajax请求的一个重要属性contentType

    比如 contentType : 'application/json;charset=UTF-8', 或者 contentType : 'text/html;charset=UTF-8', 如果不加此 ...

  7. AutoCAD.Net 实现创建wipeout遮罩实体

    [CommandMethod("mywipeout")] public static void mywipeout() { // 获取当前文档和数据库 Document acDoc ...

  8. 三，PHP中错误日志display_errors与error_reporting配置

    1,display_errors display_errors 错误回显,一般常用语开发模式,但是很多应用在正式环境中也忘记了关闭此选项.错误回显可以暴露出非常多的敏感信息,为攻击者下一步攻击提供便利 ...

  9. Ruby 和 OpenSSL CA 证书的问题

    作为一个版本控,总是希望保持电脑中各种软件到最新版本. 最近通过 brew 升级 OpenSSL 和 ruby-build 到最新,尤其是 ruby-build 支持最新的 Ruby 2.2.1,新版 ...

  10. 4 个快速的 Python 编译器 for 2018

    简评:Python 和其他的解释型语言一样经常被吐槽性能不行,所以开发人员为了提升性能创建了不少编译器,本文则选取其中的四个做了基准测试. Python 其实是一种相当快的语言,但它并不像编译型语言那 ...