事件流的理解

这个事件流单独拿出来说一说吧

什么是事件流呢，相当于页面加载js的顺序，当页面触发一个事件时，会按照一定的顺序来响应事件

DOM呢，将事件流分为了三个阶段，事件捕获，处于目标阶段，事件冒泡阶段

事件捕获呢：就是从DOCUTYPE开始从最外面的向里面逐级去找

处于目标阶段呢：就是找到之后执行代码的时候

事件冒泡呢：从事件的那个元素开始逐级向上找

<div  id="isdiv">
<p  id="isp">
<span  id="isspan">
点我呀！
</span>
</p>
</div>

<script>
let  mydiv  =  document.getElementById('isdiv'); let  myp  =  document.getElementById('isp');
let  myspan  =  document.getElementById('isspan');

mydiv.addEventListener('click',calldiv,true); myp.addEventListener('click',callp,true); myspan.addEventListener('click',callspan,true);
function  calldiv(){
alert('div');
}
function  callp(){
alert('p')
}
function  callspan(){
alert('span')
}

看代码

参数为true 时，顺序为 div -> p -> span。事件捕获阶段

参数为 false 时，顺序为 span -> p -> div。事件冒泡阶段 （默认）