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

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

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

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. VBA标准模块与类模块

    大家通过之前的介绍,已知道怎么将一个空模块插入VBA的工程中.从插入模块中可以看到,模块有有两种——标准模块与类模块.类模块是含有类定义的特殊模块,包括其属性和方法的定义.在后面会有介绍与说明. 随着 ...

  2. Filezilla Server 配置大全

    一个开源.免费的FTP服务端程序,Windows 安装程序(0.9.50 beta):右键另存为. 首先说一下FTP的二种模式:主动模式(port mode)与被动模式(passive mode),网 ...

  3. 个人卡付款sql

    select arap_djfb.billdate as 单据日期, bd_corp.unitname as 付款单位, arap_djfb.zy as 付款摘要, bd_cubasdoc.custc ...

  4. MySql5.6 Window超详细安装教程

    林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 目录 一.安装包准备二.开始安装三.验证安装四.客户端工具 一.安装包准备 1.下载MySql ...

  5. NSString类的相关用法

    一.NSString字符串连接NSString* string; // 结果字符串 NSString* string1, string2; //已存在的字符串 1. string = [NSStrin ...

  6. 【初识】KMP算法入门（转）

    感觉写的很好,尤其是底下的公式,易懂,链接:http://www.cnblogs.com/mypride/p/4950245.html 举个例子 模式串S:a s d a s d a s d f a  ...

  7. HTML5与HTML4的区别

    一.推出的理由及目标 web浏览器之间的兼容性很低 文档结构不够明确 web应用程序的功能受到了限制 二.语法的改变 内容类型 文件扩展名html htm  内容类型 texthtml   二者不变 ...

  8. JavaScript面向对象编程指南

    引言 面向对象程序设计 基本数据类型.数组.循环及条件表达式 基本数据类型 函数 函数Function 预定义函数 变量的作用域 函数也是数据 闭包 对象 原型 原型 继承 原型链 浅拷贝与深拷贝 原 ...

  9. ASCII码排序（未完）

    用指针数组 存放多个字符串 描述输入三个字符(可以重复)后,按各字符的ASCII码从小到大的顺序输出这三个字符.   输入 第一行输入一个数N,表示有N组测试数据.后面的N行输入多组数据,每组输入数据 ...

  10. myBatis出现Mapped Statements collection already contains value for

    造成这个问题的原因很多,我遇到的主要是因为 <select id="queryCountfor****" parameterType="java.lang.Inte ...