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

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

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

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. Remove LUN from OCFS2

    # ocfs2_hb_ctl -I -d /dev/mapper/backup2-backup2 508C2154503344E78ACD6CD6B000000: 2 refs #The previo ...

  2. VirtualBox 下USB 设备加载的步骤及无法加载的解决办法

    1. 将u盘插入电脑,在windows能够识别后,进入VirtualBox的选定要加载的虚拟机,选择设置——>选择usb设备项 2. 选择右边的第一或者是第二个图标,增加一个新的筛选器,第一个图 ...

  3. 36. Valid Sudoku

    ============= Determine if a Sudoku is valid, according to: Sudoku Puzzles - The Rules. The Sudoku b ...

  4. C# Winform中WndProc 函数作用

    http://blog.csdn.net/xochenlin/article/details/4328954 C# Winform中WndProc 函数作用: 主要用在拦截并处理系统消息和自定义消息 ...

  5. ExtJs4 SpringMvc3 实现Grid 分页

    新建一个Maven webapp项目,webxml以及spring配置没什么需要注意的,不再赘述. Maven依赖:(个人习惯,有用没用的都加上...) <project xmlns=" ...

  6. Well, let's start everything from the very beginning.

    帝都的霾仿佛亘古不变,不知觉2015年竟已快到尾声,而我在IBM也已呆了4个月.回顾过往多遇贵人,所获颇丰.最幸运的还是自己不忘初心,仍在不断成长.继续学习. 过去的几个月一直用WordPress,搭 ...

  7. Flink on Yarn运行机制

    从图中可以看出,Yarn的客户端需要获取hadoop的配置信息,连接Yarn的ResourceManager.所以要有设置有 YARN_CONF_DIR或者HADOOP_CONF_DIR或者HADOO ...

  8. 用imageROI来增加某范围的像素

    //用imageROI来增加某范围的像素 //作者:sandy //时间:2015-10-5 #include <cv.h> #include <highgui.h> int ...

  9. 转载__直接拿来用！最火的Android开源项目（一）

    http://www.csdn.net/article/2013-05-03/2815127-Android-open-source-projects 已分类汇总到 https://github.co ...

  10. Java多线程之捕获异常

    1.主线程不能捕获到子线程的异常 package Thread.Exection; import java.util.concurrent.ExecutorService; import java.u ...