js中冒泡機制

冒泡機制

冒泡機制：顧名思義就是個水中冒泡樣子一個道理，當元素觸發事件的時候，事件會先從window中，一層層的往下尋找目標元素，找到目標元素以後又回到window，這整個過程就叫做冒泡機制。

冒泡機制的兩個階段：

捕獲階段：捕獲階段就是從window往下一層層尋找目標元素的過程
冒泡階段：找到目標元素以後又返回window的過程

冒泡機制的特點：

從window找到目標元素的過程中，如果祖先級（父級以上）擁有和目標元素的相同的事件，祖先級（父級以上）元素的事件就會被觸發。

傳統的冒泡

一層層的往下尋找目標，找到以後纔會執行祖先級的相同事件例：
先console出的是box2 這個目標元素然後祖先級box1纔會被順帶執行。

<script type="text/javascript">
			var box=document.querySelector('.box');
			var box1=document.querySelector('.box1');
			var box2=document.querySelector('.box2');
			box1.onclick=function(){
				console.log(1)
			}
			box2.onclick=function(){//事件對象
				console.log(2)
			}
		
		</script>
``
事件捕獲

box2.addEventListener(‘click’ ,function(){
console.log(1)
},true)