什么是冒泡和捕获？

来源：互联网发布：神童vb第二章五编辑：程序博客网时间：2024/06/05 09:55

把事件捕获和冒泡的过程统称为事件的传播

事件的传播是可以阻止的：

在W3c中，使用stopPropagation（）方法
在IE下设置cancelBubble = true；

在捕获的过程中stopPropagation（）；后，后面的冒泡过程也不会发生了~ 在IE中则使用cancelBubble（IE中只有冒泡，没有捕获）

3.阻止事件的默认行为，例如click <a>后的跳转~

在W3c中，使用preventDefault（）方法；
在IE下设置window.event.returnValue = false;

不是所有的事件都能冒泡，例如：blur、focus、load、unload，（这个是从别人的文章里摘过来的,我没测试）

JavaScript所有事件的两个阶段：捕获和冒泡
一下是一段简单的HTML代码

<body>
     <ul>
            <li>
              click here
           </li>
     </ul>
</body>

如果我们点击了Li，则先回响应body的捕获事件，接下来就是ul li ，然后进入冒泡时间，顺序相反。
如果我们分别设置了响应函数，则会分别响应
我们可以阻止冒泡
function（e）
{

<a target=_blank class="s_kwd" style="color: rgb(51, 102, 153);">if</a> (<a target=_blank class="s_blk     " name="blk16" id="s##16" style="color: rgb(51, 102, 153);"></a><a target=_blank class="s_unk" id="s##17" style="color: rgb(51, 102, 153);">e</a> && <a target=_blank class="s_unk" id="s##21" style="color: rgb(51, 102, 153);">e</a>.<a target=_blank class="s_unk" id="s##23" style="color: rgb(51, 102, 153);">stopPropagation</a><a target=_blank class="s_blk     " name="blk16" id="s##24" style="color: rgb(51, 102, 153);">)</a>        <a target=_blank class="s_cmt" id="s##27" style="color: rgb(51, 102, 153);">// 支持W3C的stopPropation()方法</a>        <a target=_blank class="s_unk" id="s##30" style="color: rgb(51, 102, 153);">e</a>.<a target=_blank class="s_unk" id="s##32" style="color: rgb(51, 102, 153);">stopPropagation()</a> <a target=_blank class="s_kwd" style="color: rgb(51, 102, 153);">else</a>        <a target=_blank class="s_cmt" id="s##41" style="color: rgb(51, 102, 153);">// 否则，我们得使<span style="color: white; background-color: rgb(136, 104, 0);">用</span>IE的方式来取消事件冒泡</a>        <a target=_blank class="s_unk" id="s##44" style="color: rgb(51, 102, 153);">window</a>.<a target=_blank class="s_unk" id="s##46" style="color: rgb(51, 102, 153);">event</a>.<a target=_blank class="s_unk" id="s##48" style="color: rgb(51, 102, 153);">cancelBubble</a> = <a target=_blank class="s_kwd" style="color: rgb(51, 102, 153);">true</a>;

}

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

true : 捕获阶段

false : 冒泡阶段

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

0 0