DOM事件流
事件流描述的是从页面中接受事件的顺序
事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流
分为三个阶段:
捕获阶段(从上往下,从外往内)目标阶段冒泡阶段(从下往上,从内往外)
注意:js只能执行捕获或者冒泡其中的一个阶段，两者不可共存
onclick和attachEvent只能得到冒泡阶段，如果需要捕获阶段的话,则需要使用addEventListener
事件冒泡
事件冒泡:IE最早提出,事件开始时由具体的元素接收,然后逐级向上传播到DOM最顶层节点的过程
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}.father{position: relative;width: 300px;height: 300px;margin: 100px auto;background-color: pink;}.son{width: 200px;height: 200px;background-color: purple;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}</style></head><body><div class="father"><div class="son"></div></div></body><script>var father = document.querySelector('.father');var son = document.querySelector('.son')// 捕获阶段 如果addEventListener 第三个参数为true那么则处于捕获阶段father.addEventListener('click',function(){alert('I am Father!!!');})son.addEventListener('click',function(){alert('I am son~');})</script></html>
由上图观之,当我们点击子元素时,由于冒泡的存在,父元素也触发了点击事件.
注意:并非所有的事件都有冒泡,比如onblur,onfocus,onmouseenters,onmouseleave
事件捕获
事件捕获:网景最早提出,由DOM最顶层节点开始,然后逐级向下传播到最具体的元素接收的过程
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}.father{position: relative;width: 300px;height: 300px;margin: 100px auto;background-color: pink;}.son{width: 200px;height: 200px;background-color: purple;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}</style></head><body><div class="father"><div class="son"></div></div></body><script>var father = document.querySelector('.father');var son = document.querySelector('.son')// 冒泡阶段:如果addEventListener第三个参数是false或者省略,那么则处于冒泡阶段father.addEventListener('click',function(){alert('I am Father!!!');},true)son.addEventListener('click',function(){alert('I am son~');},true)</script></html>
形象化解释
我们向水里面扔一块石头,首先它会有一个下降的过程,该过程就理解为捕获阶段。而当石头沉入水底后,水中就会产生从下到上的泡泡,这个阶段则为冒泡阶段。
