javascript事件流

事件流：描述页面接收事件的顺序。
事件冒泡；事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。
事件捕获：事件从不太具体的节点开始触发，然后逐级向下传播到到最具体的元素。
DOM0事件流：在冒泡阶段被处理。
DOM2事件流：包括三个阶段，按照发生顺序的角度来说分别是事件捕获阶段、处于目标阶段和事件冒泡阶段。添加事件的方法是addEventListener(event,fn,useCapture)；userCapture是布尔值，true为在捕获阶段执行事件，false为在冒泡阶段执行事件。
例一：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DOM2</title>
<style type="text/css">
#father{width:100px;height:100px;padding:50px;background:#000;}
#child{width:100px;height:100px;background:#fff;}
</style>
<script type="text/javascript">
window.onload=function(){
	var oFather=document.getElementById('father');
	var oChild=document.getElementById('child');
        //捕获阶段执行事件
	oFather.addEventListener('click',function(){
		this.style.backgroundColor="red";
		alert('父元素被点击')
	},true);
	oChild.addEventListener('click',function(ev){
		alert('子元素被点击');
	},true);
	oChild.addEventListener('click',function(ev){
		alert('我是子元素被点击');
	},true);	
        //冒泡阶段执行事件
        oFather.addEventListener('click',function(){
		this.style.backgroundColor="red";
		alert('父元素被点击')
	},false);
	oChild.addEventListener('click',function(ev){
		alert('子元素被点击');
	},false);
	oChild.addEventListener('click',function(ev){
		alert('我是子元素被点击');
	},false);
}
</script>
</head>

<body>
<div id="father">
	<div id="child"></div>
</div>
</body>
</html>

IE事件处理程序：IE不支持DOM2事件流，以自己独特的方法：attachEvent()来实现事件处理。并且只在冒泡阶段被执行。
例二：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DOM2</title>
<style type="text/css">
#father{width:100px;height:100px;padding:50px;background:#000;}
#child{width:100px;height:100px;background:#fff;}
</style>
<script type="text/javascript">
window.onload=function(){
	var oFather=document.getElementById('father');
	var oChild=document.getElementById('child');
	oChild.attachEvent('onclick',function(){
		alert('子元素被点击')
	});
	oChild.attachEvent('onclick',function(){
		alert('我是子元素被点击')
	});
	oFather.attachEvent('onclick',function(){
		alert('父元素被点击')
	});	
}
</script>
</head>

<body>
<div id="father">
	<div id="child"></div>
</div>
</body>
</html>

注意：为同一个元素添加两个不同的时间处理程序，IE和DOM的方法不同，IE以添加顺序的相反顺序来执行，而DOM是按照添加顺序来执行的。
声明：IE9开始已经逐步支持DOM2事件流，所以，上述IE全部是指IE9之前的浏览器。

posted @ 2014-05-06 09:20  invincible_hehe  阅读(214)  评论(0)    收藏  举报