NO.48 Javascript中的事件冒泡
事件传播——冒泡与捕获
DOM事件标准定义了两种事件流，这两种事件流有着显著的不同并且可能对你的应用有着相当大的影响。这两种事件流分别是捕获和冒泡。和许多Web技术一样，在它们成为标准之前，Netscape和微软各自不同地实现了它们。Netscape选择实现了捕获事件流，微软则实现了冒泡事件流。幸运的是，W3C决定组合使用这两种方法,并且大多数新浏览器都遵循这两种事件流方式。 默认情况下，事件使用冒泡事件流，不使用捕获事件流。然而，在Firefox和Safari里，你可以显式的指定使用捕获事件流，方法是在注册事件时传入useCapture参数，将这个参数设为true。
冒泡事件流
当事件在某一DOM元素被触发时，例如用户在客户名字节点上点击鼠标，事件将跟随着该节点继承自的各个父节点冒泡穿过整个的DOM节点层次，直到它遇到依附有该事件类型处理器的节点，此时，该事件是onclick事件。在冒泡过程中的任何时候都可以终止事件的冒泡，在遵从W3C标准的浏览器里可以通过调用事件对象上的stopPropagation()方法，在Internet Explorer里可以通过设置事件对象的cancelBubble属性为true。如果不停止事件的传播，事件将一直通过DOM冒泡直至到达文档根。捕获事件流
事件的处理将从DOM层次的根开始，而不是从触发事件的目标元素开始，事件被从目标元素的所有祖先元素依次往下传递。在这个过程中，事件会被从文档根到事件目标元素之间各个继承派生的元素所捕获，如果事件监听器在被注册时设置了useCapture属性为true,那么它们可以被分派给这期间的任何元素以对事件做出处理；否则，事件会被接着传递给派生元素路径上的下一元素，直至目标元素。事件到达目标元素后，它会接着通过DOM节点再进行冒泡。
代码
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>事件冒泡</title>
</head>
<body>
<script>
functionfn1(event){
alert('clickgoogle');
}
functionfn2(event){
alert('clickgoogle');
event.preventDefault();
}
functionfn3(event){
alert('clickgoogle');
event.stopPropagation();
}
functionfn4(event){
alert('clickgoogle');
event.preventDefault();
event.stopPropagation();
}
</script>
<divid="container1"onclick="alert('clickcontainer1');">
<divid="container2"onclick="alert('clickcontainer2');">
<ahref="http://www.google.com"target="_blank"onclick="fn1(event);">Google</a>
<ahref="http://www.google.com"target="_blank"onclick="fn2(event);">Google</a>
<ahref="http://www.google.com"target="_blank"onclick="fn3(event);">Google</a>
<ahref="http://www.google.com"target="_blank"onclick="fn4(event);">Google</a>
</div>
</div>
</body>
</html>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>事件冒泡</title>
</head>
<body>
<script>
functionfn1(event){
alert('clickgoogle');
}
functionfn2(event){
alert('clickgoogle');
event.preventDefault();
}
functionfn3(event){
alert('clickgoogle');
event.stopPropagation();
}
functionfn4(event){
alert('clickgoogle');
event.preventDefault();
event.stopPropagation();
}
</script>
<divid="container1"onclick="alert('clickcontainer1');">
<divid="container2"onclick="alert('clickcontainer2');">
<ahref="http://www.google.com"target="_blank"onclick="fn1(event);">Google</a>
<ahref="http://www.google.com"target="_blank"onclick="fn2(event);">Google</a>
<ahref="http://www.google.com"target="_blank"onclick="fn3(event);">Google</a>
<ahref="http://www.google.com"target="_blank"onclick="fn4(event);">Google</a>
</div>
</div>
</body>
</html>
运行结果：
点击第一个链接，clickgoogle ->clickcontainer2-> clickcontainer1-> 打开google页面
点击第二个链接，clickgoogle ->clickcontainer2-> clickcontainer1
点击第三个链接，clickgoogle -> open_google_page
点击第四个链接，clickgoogle
preventDefault的作用与returnValue相同．都是用来阻止或取消浏览器以及页面内元素的默认动作．比如说让连接失效，表单不能提交，鼠标右键弹不出菜单．这都是浏览器的默认动作．在有时候我们也许要阻止浏览器的这些行为．preventDefault遵循W3C标准．支持FireFox，但不被IE浏览器支持．
可以看到，事件冒泡是从最初引发事件的HTML节点开始，一步步向上引发父节点的相同事件。
在Firefox中，我们可以通过preventDefault 函数阻止默认的行为（比如这个例子中，点击链接的默认行为是打开链接地址）
通过stopPropagation 函数阻止事件冒泡。
可以看到上面的代码在ie下面是没有什么效果的，
观察IE下的事件冒泡
代码
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>事件冒泡firefox</title>
</head>
<body>
<script>
functionfn1_ie(){
alert('clickgoogle');
}
functionfn2_ie(){
alert('clickgoogle');
event.returnValue=false;
}
functionfn3_ie(){
alert('clickgoogle');
event.cancelBubble=true;
}
functionfn4_ie(){
alert('clickgoogle');
event.returnValue=false;
event.cancelBubble=true;
}
</script>
<divid="container1_ie"onclick="alert('clickcontainer1');">
<divid="container2_ie"onclick="alert('clickcontainer2');">
<ahref="http://www.google.com"target="_blank"onclick="fn1_ie();">Google</a>
<ahref="http://www.google.com"target="_blank"onclick="fn2_ie();">Google</a>
<ahref="http://www.google.com"target="_blank"onclick="fn3_ie();">Google</a>
<ahref="http://www.google.com"target="_blank"onclick="fn4_ie();">Google</a>
</div>
</div>
</body>
</html>
1、canvas绘图小总结
2、sql语句优化方案
3、POJ 3252 Round Numbers（数位dp）
4、测试部工作检查观点
5、zend framework2 的配置加载过程
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>事件冒泡firefox</title>
</head>
<body>
<script>
functionfn1_ie(){
alert('clickgoogle');
}
functionfn2_ie(){
alert('clickgoogle');
event.returnValue=false;
}
functionfn3_ie(){
alert('clickgoogle');
event.cancelBubble=true;
}
functionfn4_ie(){
alert('clickgoogle');
event.returnValue=false;
event.cancelBubble=true;
}
</script>
<divid="container1_ie"onclick="alert('clickcontainer1');">
<divid="container2_ie"onclick="alert('clickcontainer2');">
<ahref="http://www.google.com"target="_blank"onclick="fn1_ie();">Google</a>
<ahref="http://www.google.com"target="_blank"onclick="fn2_ie();">Google</a>
<ahref="http://www.google.com"target="_blank"onclick="fn3_ie();">Google</a>
<ahref="http://www.google.com"target="_blank"onclick="fn4_ie();">Google</a>
</div>
</div>
</body>
</html>
优质内容筛选与推荐>>
1、canvas绘图小总结
2、sql语句优化方案
3、POJ 3252 Round Numbers（数位dp）
4、测试部工作检查观点
5、zend framework2 的配置加载过程