JS的事件流如下:(图忘记在哪里偷的。。忘记了)
类似于,往水里丢下去一块大石头,在沉下去的过程中石头是可以被俘获的(事件俘获),
沉到底之后会往上冒泡泡(冒泡,通常用于事件委托,减少对DOM的操作)
那么事件俘获和事件冒泡有什么用呢?
事件俘获:我确实想不到有啥用。。一开始我以为可以进行拦截。。。
事件冒泡的话就可以减少对DOM的操作,减少重排。
<style>
ul>li{
width: 50px;
height: 30px;
background-color: blue;
}
ul li:nth-child(2n){
background-color: red;
}
</style>
<script>
const ul = document.querySelector("ul");
const li = document.querySelector("li")
ul.addEventListener('click',function(e){
if(e.target.tagName.toLowerCase() == 'li')
alert(e.target.dataset.value)
})
</script>