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

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

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

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学习笔记36——使用原始XML文件

    XML文件 android中使用XML文件,需要开发者手动创建res/xml文件夹. 实例如下: book.xml==> <?xml version="1.0" enc ...

  2. jQuery formValidator手册

    什么是jQuery formValidator? jQuery formValidator表单验证插件是客户端表单验证插件. 在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人 ...

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

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

  4. 一个Oracle触发器的示例

    CREATE OR REPLACE TRIGGER WoStateChange AFTER UPDATE on csdbuser.T_PD_WorkOrder for each row declare ...

  5. GR&R

    ANOVA gauge R&R (or ANOVA gauge repeatability and reproducibility) is a measurement systems anal ...

  6. ADF_Database Develop系列1_通过UML数据库开发之建Logical UML Class Model

    2013-05-01 Created By BaoXinjian

  7. PLSQL_PLSQL读和写CSV文件方式（案例）

    2012-01-06 Created By BaoXinjin

  8. label 行距

    NSMutableAttributedString * attributedString1 = [[NSMutableAttributedString alloc] initWithString:te ...

  9. Tomcat发布项目时，浏览器地址栏图标的问题

    最近在做一个Java网络应用程序,服务器是tomcat.在默认情况下,当用户访问该网络应用时,地址栏图标显示为tomcat猫.我希望把它换成自己的图标,于是研究了一下.在研究过程中,我发现网上的资料大 ...

  10. IE,Chrome滚动条样式CSS

    <style type="text/css"> *{ scrollbar-face-color:#F3F3F3; /*面子*/ scrollbar-arrow-colo ...