事件流与事件委托也是前端面试的高频题了,大量繁琐的文字概念我就不写了,只写写我理解简记下来的!!!!
事件流:
所谓的事件流,就是时间连续发生的流向(执行顺序)
1.特性:
1.嵌套关系
2.相同事件
2.事件类别:(事件传播)---浏览器默认 冒泡事件
1.捕获事件(网景):外 -> 内
2.冒泡事件(微软): 内 -> 外
3.标准事件流 (W3C):外 -> 内 -> 外
事件委托
1.原理:
事件传播的特征 --事件冒泡
2.优点:
1.提高性能与效率
2.减少事件注册,节省内存的使用
3.未来元素的添加无需再次注册事件
3.案例:
<div id="box">
<div class="tn1">1</div>
<div class="tn2">2</div>
<div class="tn3">3</div>
</div>
<script>
var box = document.querySeletor('#box')
box.onclick = function(event){
if(event.target.className === 'tn1'){
console.log('tn1')
}
if(event.target.className === 'tn2'){
console.log('tn2')
}
if(event.target.className === 'tn3'){
console.log('tn3')
}
}
</script>