欢迎使用CSDN-markdown编辑器

来源：互联网发布：淘宝网店充话费编辑：程序博客网时间：2024/06/05 16:35

随笔 - 256 文章 - 1 评论 - 26
事件捕获（capture）和冒泡事件(Bubble)

PS：这里是我从别人的博客中学习事件捕获和冒泡是的总结，如果你也感兴趣的话，建议你点击链接查看原博客的内容，他们写的都是很经典！

 对“捕获”和“冒泡”这两个概念，我想我们对冒泡更熟悉一些，因为在我们使用的所有浏览器中，都支持事件冒泡 ，即事件由子元素向祖先元素传播的，就 像气泡从水底向水面上浮一样。而在像firefox,chrome,safari这类所谓的标准浏览器中，事件传播还有个阶段，那就是捕获阶段，这个很少 有用武之地，所以被人疏忽遗忘也在所难免了，不常用不代表它不存在，本着科学严谨的态度，我们有必要去看一下它的庐山真面目。

事件捕获

事实上，捕获阶段是一个和冒泡阶段完全相反的过程，即事件由祖先元素向子元素传播，和一个石子儿从水面向水底下沉一样，要说明的是在 IE，opera浏览器中，是不存在这个阶段的。从各浏览器提供的注册事件监听的方法中可见一斑，例如适用于ie,opera的attachEvent，有两个参数，attachEvent(”on”+type,fn)，而适用于所谓标准浏览器的addEventListener则有三个参数，addEventListener(type,fn,boolean)，前面两个参数不用解释，第三个参数boolean，就是决定注册事件发生在捕获阶段还是冒泡阶段，具体参考如下：

true : 捕获阶段

false : 冒泡阶段
复制代码

    <title>    </title><style type="text/css">        *{margin:0px;padding:0px;}        h1{text-align:center;color:#666;margin-top:18px;}        #content{width:700px;height:250px;border:5px solid green;margin:20px auto;position:relative;}        #obj1{height:100px;background:#d5d5d5;}        #obj2{background:#777;}        #obj3{position:absolute;top:200px;left:150px;width:200px;background:#555;}        #obj4{height:100px;background:#999;margin-top:50px;}        .active{color:#f00}    </style></head><body><h1>悟透事件的捕获和冒泡</h1>    <div id="content">       <div id="obj1">          <h2>元素a</h2>               <div id="obj2">                 <h2>元素b</h2>                 <div id="obj3">                   <h2>元素c</h2>                </div>           </div>        </div>       <div id="obj4">           <h2>元素d</h2>      </div></div>

var divs=document.getElementById(“content”).getElementsByTagName(“div”);
var count=1;
for(var i=0;i

0 0