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

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

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

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. 使用eclipse和maven创建activiti项目基础配置

    项目组最近的项目使用到了activiti工作流,到处查找了一些资料后,初步完成任务.但是我所做的事只是在搭好的环境中调用接口和方法操作,因此自己尝试着也从搭建环境入手,以下是成功实现以后的记录. 实现 ...

  2. Learning Core Data 1

    What is Core Data? If you want to build anything beyond the most simplistic apps for iOS, you’ll nee ...

  3. [JS]深入理解JavaScript系列（4）：立即调用的函数表达式

    转自:汤姆大叔的博客 前言 大家学JavaScript的时候,经常遇到自执行匿名函数的代码,今天我们主要就来想想说一下自执行.在详细了解这个之前,我们来谈了解一下"自执行"这个叫法 ...

  4. [Mysql] MySQL配置文件my.cnf的理解

    一.缘由 最近要接手数据库的维护工作,公司首选MySQL.对于MySQL的理解,我认为很多性能优化工作.主从主主复制都是在调整参数,来适应不同时期不同数量级的数据. 故,理解透彻my.cnf里的参数是 ...

  5. 如何刪除GitHub中的repository

    如何刪除一github中的repository,這本該是個非常簡單的操作,可一開始搜的時候,有不少文章比較含糊.這裡就記錄下來吧. 1.訪問https://github.com/settings/pr ...

  6. JAVA CAS原理深度分析

    参考文档: http://www.blogjava.net/xylz/archive/2010/07/04/325206.html http://blog.hesey.net/2011/09/reso ...

  7. Maven依赖(转)

    相同依赖级别,先加入的先依赖不同依赖级别,级别短的先依赖 version-->SNAPSHOTxxx-里程碑-->SNAPSHOT,alpha,beta,Release(RC),GA()s ...

  8. R %operator% 含义

    %foo% is the syntax for a binary operator. In base R: %in%: '"%in%" <- function(x, tabl ...

  9. [ActionScript 3.0] AS3 时间日期格式化DateTimeFormatter类的运用

    import flash.globalization.DateTimeFormatter; var _timeFormatter:DateTimeFormatter; var _dateFormatt ...

  10. Wireshark的时间格式设置

    默认是自捕获开始经历的秒数,如下图: 要调整的设置步骤: step1.打开wireshark step2.选择view->Time Display Fommat step3.选择你所需要的时间格 ...