奇怪的DOM事件触发顺序 -

yxc_gdut

浏览: 97990 次
性别:
来自: 深圳

最近访客更多访客>>

麦兜猪

q75071852

timorandtm

fxs2005

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

奇怪的DOM事件触发顺序

博客分类：

javascript

javascript dom事件执行顺序

撇开IE的时间处理机制，DOM level2 的事件触发机制是先捕获再上浮。

之前测试过，原来浏览器执行DOM事件并非严格按照先捕获再上浮的顺序，

看看下面代码：

<!DOCTYPE HTML>
<html>
  <head>
    <title>事件触发顺序</title>
    <meta http-equiv="content-type" content="text/html; charset=GB2312">
	<style type="text/css">
	  #outer{width:200px;border:3px solid red;color:#f00;padding:0.5em;}
	  #inner{border:3px solid green;color:#00f;padding:0.5em;}
	</style>
  </head>
  <body>
    <div id='outer'>
    	this is outer div
    	<div id='inner'>
    		this is inner div
    	</div>
    </div>
    <script type='text/javascript'>
	  	window.onload=function(){
		  	var body = document.body;
		  	var outer_el = document.getElementById('outer');
		  	var inner_el = document.getElementById('inner');
		  	body.addEventListener('click',func1,true);
		  	outer_el.addEventListener('click',func2,true);
		  	inner_el.addEventListener('click',func3,true);
		  	inner_el.addEventListener('click',func4,false);
		  	outer_el.addEventListener('click',func5,false);
		  	body.addEventListener('click',func6,false);
	  	}
	  	function func1(){
	  		console.log('事件1');
	  	}
	  	function func2(){
	  		console.log('事件2');
	  	}
	  	function func3(){
	  		console.log('事件3');
	  	}
	  	function func4(){
	  		console.log('事件4');
	  	}
	  	function func5(){
	  		console.log('事件5');
	  	}
	  	function func6(){
	  		console.log('事件6');
	  	}
	  </script>	
  </body>
</html>

上面代码点击inner元素，执行结果正常

稍微将事件定义的顺序调整下

		  	body.addEventListener('click',func1,true);
		  	outer_el.addEventListener('click',func2,true);
		  	inner_el.addEventListener('click',func4,false);
		  	inner_el.addEventListener('click',func3,true);
		  	outer_el.addEventListener('click',func5,false);
		  	body.addEventListener('click',func6,false);

再次点击inner元素