把事件捕获和冒泡的过程统称为事件的传播
事件的传播是可以阻止的:
- 在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 ,然后进入冒泡时间,顺序相反。
JavaScript所有事件的两个阶段:捕获和冒泡
一下是一段简单的HTML代码
<body>
<ul>
<li>
click here
</li>
</ul>
</body>
如果我们分别设置了响应函数,则会分别响应
我们可以阻止冒泡
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 : 冒泡阶段