js之addEventListener事件捕获与事件冒泡

大家都知道,事件冒泡是由内向外触发,如图:

js之addEventListener事件捕获与事件冒泡

结构是这个样子的:

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

此时用事件冒泡监听的话,,是这个样子:

window.onload = function(){
			document.getElementById('son').addEventListener('click',function(){
				console.log('son');
			},false);
			document.getElementById('father').addEventListener('click',function(){
				console.log('father');
			},false);	
			document.getElementsByTagName('body')[0].addEventListener('click',function(){
				console.log('body');
			},false);	
			document.getElementsByTagName('html')[0].addEventListener('click',function(){
				console.log('html');
			},false);
		};

结果自然是由内向外打印出来:

js之addEventListener事件捕获与事件冒泡

如果将最后一个参数均改成true的话:

window.onload = function(){
			document.getElementById('son').addEventListener('click',function(){
				console.log('son');
			},true);
			document.getElementById('father').addEventListener('click',function(){
				console.log('father');
			},true);	
			document.getElementsByTagName('body')[0].addEventListener('click',function(){
				console.log('body');
			},true);	
			document.getElementsByTagName('html')[0].addEventListener('click',function(){
				console.log('html');
			},true);
		};


则顺序会反过来:

好了,那么现在的问题就是,如果这些监听中,有些是捕获,有些事冒泡的话,又会怎样呢?

接下来,我尝试着改了最外层的两个为冒泡,最里层的两个为捕获:

window.onload = function(){
			document.getElementById('son').addEventListener('click',function(){
				console.log('son');
			},true);
			document.getElementById('father').addEventListener('click',function(){
				console.log('father');
			},true);	
			document.getElementsByTagName('body')[0].addEventListener('click',function(){
				console.log('body');
			},false);	
			document.getElementsByTagName('html')[0].addEventListener('click',function(){
				console.log('html');
			},false);
		};

结果竟然是:

js之addEventListener事件捕获与事件冒泡

那么接连的试了几个排列组合之后,我的结论似乎是:

如果监听中混合着捕获与冒泡的话,则优先处理事件捕获的几个监听,并按照捕获顺序处理,后处理冒泡的监听,还是按照冒泡顺序处理。






















你可能感兴趣的:(js之addEventListener事件捕获与事件冒泡)