事件冒泡和事件捕獲的順序

給同一個元素註冊點擊事件，測試事件冒泡和事件捕獲的順序，代碼如下：

<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>

 

運行結果是：

 我們可以看到外層元素先觸發事件捕獲，後觸發事件冒泡。內層元素先觸發事件冒泡，再觸發事件捕獲。這個事件觸發的順序和綁定事件的先後順序沒有關係，即使先給內層元素註冊點擊事件，最後觸發的順序還是如上圖結果所示。