奇怪的DOM事件触发顺序

最新推荐文章于 2023-06-20 11:51:14 发布

yxc_gdut

最新推荐文章于 2023-06-20 11:51:14 发布

阅读量235

点赞数

分类专栏： javascript 文章标签： javascript dom事件执行顺序 ViewUI

本文链接：https://blog.csdn.net/yxc_gdut/article/details/84413776

版权

javascript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

撇开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.οnlοad=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元素