事件冒泡和事件捕获的顺序

给同一个元素注册点击事件，测试事件冒泡和事件捕获的顺序，代码如下：

<div class='container'> 
	<div class='wapper'>
	    <div class='context'>
		    点击你试试
	    </div>
	</div>
</div>
<script>

	var container = document.querySelector('.container');
	var wapper = document.querySelector('.wapper');
	var context = document.querySelector('.context');


	container.addEventListener('click',function(){
		console.log('冒泡外');
	},false);
	wapper.addEventListener('click',function(){
		console.log('冒泡中');
	},false);
	context.addEventListener('click',function(){
		console.log('冒泡内');
	},false);
	
	container.addEventListener('click',function(){
		console.log('捕获外');
	},true);
	wapper.addEventListener('click',function(){
		console.log('捕获中');
	},true);
	context.addEventListener('click',function(){
		console.log('捕获内');
	},true);
</script>

 

运行结果是：

 我们可以看到外层元素先触发事件捕获，后触发事件冒泡。内层元素先触发事件冒泡，再触发事件捕获。这个事件触发的顺序和绑定事件的先后顺序没有关系，即使先给内层元素注册点击事件，最后触发的顺序还是如上图结果所示。