冒泡事件可以查询上个随笔，

捕捉事件正好和冒泡时间正反着

所以这代码我把冒泡事件注释，

html和css的内容

<style type="text/css">

    #box1{width:500px;height:500px;background:#900;}

     #box2{width:400px;height:400px;background:#090;}

      #box3{width:300px;height:300px;background:#009;}

       #box4{width:200px;height:200px;background:#990;}

        #box5{width:100px;height:100px;background:#099;}

</style>

<body>

<div id="box1">

    <div id="box2">

       <div id="box3">

                <div id="box4">

                       <div id="box5">

                       </div>

                </div>

       </div>

    </div>

</div>

js部分代码

 <script>

     window.onload=function()

     {

       //监听事件

         var $=function(_id){return document.getElementById(_id);}

         document.addEventListener("click", function(){alert("捕抓中，你点击了document")}, true);

         document.body.addEventListener("click", function(){alert("捕抓中，你点击了body")}, true);

            $("box1").addEventListener("click", function(){alert("捕抓中，你点击了id为："+this.id +"的div")}, true);

               $("box2").addEventListener("click", function(){alert("捕抓中，你点击了id为："+this.id +"的div")}, true);

                  $("box3").addEventListener("click", function(){alert("捕抓中，你点击了id为："+this.id +"的div")}, true);

                      $("box4").addEventListener("click", function(){alert("捕抓中，你点击了id为："+this.id +"的div")}, true);

                         // $("box5").addEventListener("click", function(){alert("捕抓中，你点击了id为："+this.id +"的div")}, true);

      //冒泡事件

      // var $=function(_id){return document.getElementById(_id);}

         // document.addEventListener("click", function(){alert("冒泡中，你点击了document")}, false);

         // document.body.addEventListener("click", function(){alert("冒泡中，你点击了body")}, false);

         //    $("box1").addEventListener("click", function(){alert("冒泡中，你点击了id为："+this.id +"的div")}, false);

         //       $("box2").addEventListener("click", function(){alert("冒泡中，你点击了id为："+this.id +"的div")}, false);

         //          $("box3").addEventListener("click", function(){alert("冒泡中，你点击了id为："+this.id +"的div")}, false);

         //              $("box4").addEventListener("click", function(){alert("冒泡中，你点击了id为："+this.id +"的div")}, false);

         //                 // $("box5").addEventListener("click", function(){alert("冒泡中，你点击了id为："+this.id +"的div")}, false);

 //删除监听事件，必须完全一样

 var del =function(){alert("冒泡中，你点击了id为: "+this.id +"的div")}

  $("box5").addEventListener("click", del, false);

  // $("box5").removeEventListener("click",del, false);

  //ie用的是attachEvent()  和detachEvent()  都有两个参数   ie11也不支持了

  // $("box5").attachEvent("onclick",del);

  // $("box5").detachEvent("onclick",del);

     }

 </script>

其实捕捉监听事件和冒泡事件只是函数的一个参数不同，一个true，一个false。

其实主要有时候我们实现某些功能时，需要移除捕捉和冒泡事件。

　　

js的捕捉事件，冒泡事件的更多相关文章

  1. 理解js事件冒泡事件委托事件捕获

    js事件冒泡 javascript的事件传播过程中,当事件在一个元素上出发之后,事件会逐级传播给先辈元素,直到document为止,有的浏览器可能到window为止,这就是事件冒泡现象. <di ...

  2. js --- 事件冒泡 事件捕获

    先上结论: 他们是描述事件触发时序问题的术语.事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件.相反的,事件冒泡是自下而上的去触发事件.绑定事件方法的第三个参数,就是控制事 ...

  3. JavaScript和JQuery中的事件\委托链\事件冒泡\事件捕获,兼容所有浏览器

    有做过北大青鸟培训讲师经验的我,如今在一家公司做技术部经理的职位,发现有很多程序员的基本功相当糟糕,在组织企业内部培训时讲解了一些案例,总结了一些经典代码,希望对自己和有需要的人提供一些帮助吧: Ja ...

  4. 【事件流】浅谈事件冒泡&&事件捕获------【巷子】

    首先在扯淡的时候我们需要先了解一个东西,这个东西就是事件流. 1.什么是事件流? 解释:当一个HTML元素触发一个事件处理函数的时候,该事件会在该元素节点到根节点之间传播,传播路径所经过的节点都会接受 ...

  5. jQuery--事件, 事件绑定, 阻止事件冒泡, 事件委托,页面载入后函数

    1.常用事件, 按住shift键实现同步选择效果,搜索框联想效果 2.阻止事件冒泡 3.事件委托 4.使用 $(document).ready(function (){...}) 实现文件加载完绑定事 ...

  6. jQuery之防止冒泡事件,冒泡事件就是点击子节点，会向上触发父节点，祖先节点的点击事件。

    冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. 下面是html代码部分: <body> <div id="content"> 外层div元素 ...

  7. javaScript的事件冒泡事件捕获

    (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: div -> body -> document IE 6.0: div ...

  8. DOM 事件监听 事件冒泡 事件捕获

    addEventListener() 方法 实例: // 当用户点击按钮时触发监听事件: document.getElementById("myBtn").addEventList ...

  9. js中事件冒泡，事件捕获详解

    一.事件流 事件是js与HTML交互的基础,事件流描述的是页面接受事件的顺序,而事件流又分为三个阶段:捕获阶段.目标阶段和冒泡阶段. 如果单纯的事件处理,事件捕获和事件冒泡二选一即可,导致两者并存的原 ...

随机推荐

  1. 一个android的各种控件库

    在这里 https://github.com/Trinea/android-open-project 很多的listview,非常棒

  2. activiti自定义流程之Spring整合activiti-modeler5.16实例（七）：任务列表展示

    注:(1)环境搭建:activiti自定义流程之Spring整合activiti-modeler5.16实例(一):环境搭建        (2)创建流程模型:activiti自定义流程之Spring ...

  3. Linux客户端、服务器、窗口管理器的关系

    嵌入式linux中文站发现很多LINUX初学者在学习linux图形方面的知识时会遇到一些概念,如:X.X11.Xfree86.WM.KDE.GNOME.QT.QT/E.Qtopia.DirectFB. ...

  4. 【Android】源码external/目录中在编译过程中生成的文件列表

    => external/eyes-free:   accessibilityvalidator.jar (host,share) => external/mesa3d:   libMesa ...

  5. Observer - IO (File Monitor)

    1. 概述 有时被称作发布/订阅模式,观察者模式定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象.这个主题对象在状态发生变化时,会通知所有观察者对象,使它们能够自动更新自己. 2. ...

  6. SparkSql官方文档中文翻译(java版本)

    1 概述(Overview) 2 DataFrames 2.1 入口:SQLContext(Starting Point: SQLContext) 2.2 创建DataFrames(Creating ...

  7. Codeforces Round #356 (Div. 2)B. Bear and Finding Criminals（水题）

    B. Bear and Finding Criminals time limit per test 2 seconds memory limit per test 256 megabytes inpu ...

  8. php 共享内存

    共享内存主要用于进程间通信 php中的共享内存有两套扩展可以实现 1.shmop  编译时需要开启 --enable-shmop 参数 实例: $shm_key = ftok(__FILE__, 't ...

  9. [实变函数]2.2 聚点 (cluster point), 内点 (interior point), 界点 (boundary point)

    设 $E\subset \bbR^n, P_0\in \bbR^n$. 1 若 $\exists\ U(P_0)\subset E$, 则称 $P_0$ 为 $E$ 的内点 (interior poi ...

  10. 转载__Android开源项目（二）

    http://www.csdn.net/article/1970-01-01/2815145 GitHub上的开源项目不胜枚举,通过这些项目,也能让开发者在应用开发过程中事半功倍,作为开发者的你,在用 ...