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)