事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标(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. Reporting Service服务SharePoint集成模式安装配置（9、PowerPivot for SharePoint 安装配置详细）

    PowerPivot for SharePoint 增加了对发布到 SharePoint 中的 PowerPivot 工作簿的协作和文档管理支持. PowerPivot for SharePoint ...

  2. Android ActionBar使用方法

    对于这ActionBar我想很多人都想了解一下到底是怎么一个使用方法,以及它都存在哪些可操作的和使用的地方.如下图所示:<ignore_js_op> 这便是ActionBar的基本内容.获 ...

  3. C#设置图片透明度

    逐个像素进行Alpha值的设置,网上其他的代码不能处理有透明背景的图片,因此要对Alpha.R.G.B均为0的透明色进行特殊处理,不做转换. private Bitmap SetImageOpacit ...

  4. Winform Log4net 配置写不同文件

    以下配置了二种写文件,第一种根据日期写文件yyyyMMdd.txt,第二种是写固定文件login.txt. 1, 下载Log4net组件: http://logging.apache.org/log4 ...

  5. 百度直接搜IP可以查看本机外网IP

    百度直接搜IP可以查看本机外网IP ipconfig在控制台查看的是内网IP

  6. [ActionScript 3.0] 处理xml内容换行时行间距较大问题的一种简单方法

    我们一定遇到过这种情况,在读取xml里的文章内容时,一旦有换行的位置在flash里显示出来的行间距会比较大,而并非我们想要的效果,解决这个问题的方法除了使用正则表达式以外,这里介绍一种比较简单的方法, ...

  7. Easyui里面动态设置输入框的可见性

    JQuery EasyUI 动态隐藏   一.隐藏datagrid某一列 $('#dg').datagrid('hideColumn', 'field'); 二.隐藏html的lable.input标 ...

  8. 2019.2.14 t3 车辆销售

    用算法求最大生成树,在并查集合并时,把原本的一个根连向另一个 根改成两个根都连向一个新建的节点,并把当前正在处理的边的权值赋给这个新 节点做点权.这样形成的结构会是一棵树. 一个点的答案大致上是树的根 ...

  9. Jmeter打开url时提示“请在微信客户端打开链接问题”

    前提: 1.HTTP信息头管理器已添加了“User-Agent” 2.工作台添加HTTP代理服务器(注意端口和客户端填写的代理端口要一致) 但是运行的时候总是提示“请在微信客户端打开链接” 查阅各种资 ...

  10. [转] 深入理解Java G1垃圾收集器

    [From] https://www.cnblogs.com/ASPNET2008/p/6496481.html 深入理解Java G1垃圾收集器 本文首先简单介绍了垃圾收集的常见方式,然后再分析了G ...