标签：style blog class code c java
W3C规范对于脚本事件有两种处理方式,第一种为冒泡模型,第二种是事件捕获模型,前者为早期浏览器所支持的(也称DOM 0标准),后者为W3C规范推荐的方法(也称DMO 2标准).
其主要区别:
@1:事件捕获不依赖于特定的事件来处理属性
@2:你可以对任何对象的任何一种事件注册多个事件句柄函数
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个javascript程序</title>
<style type="text/css">
#form{
background-color: #f00;
width: 100px;
height: 100px;
padding: 10px;
}
</style>
</head>
<body >
<form id="form" action="">
<p>
<input type="submit" value="Submit"/>
</p>
</form>
</body>
</html>
<script type="text/javascript">
function cascadeDown(event){
alert("capturing" + this);
}
function bubleUp(event){
alert("bubleUp" + this);
}
function setup(){
//事件捕获
document.addEventListener("click",cascadeDown,true);//以捕获事件方式
document.forms[0].addEventListener("click",cascadeDown,true);
document.forms[0].elements[0].addEventListener("click",cascadeDown,true);
//事件冒泡
document.addEventListener("click", bubleUp, false);
document.forms[0].addEventListener("click",bubleUp,false);
document.forms[0].elements[0].addEventListener("click",bubleUp,false);
}
window.onload = setup;
</script>
上述代码的执行结果为:
事件的处理将从DOM层次的根开始，而不是从触发事件的目标元素开始，事件被从目标元素的所有祖先元素依次往下传递。在这个过程中，事件会被从文档根到事件目标元素之间各个继承派生的元素所捕获，如果事件监听器在被注册时设置了useCapture属性为true,那么它们可以被分派给这期间的任何元素以对事件做出处理；否则，事件会被接着传递给派生元素路径上的下一元素，直至目标元素。事件到达目标元素后，它会接着通过DOM节点再进行冒泡。
javascript的事件捕获和事件冒泡,布布扣,bubuko.com
标签：style blog class code c java
原文地址：http://blog.csdn.net/u012332735/article/details/26006461
