1 事件階段
- 事件捕獲階段: 從Window->Document->html--->到具體的target
- 事件冒泡階段: 從target-->Window
1.1 事件階段只能二選一
- addEventListener(type,fn,boolean)
- boolean: 默認(rèn)false,冒泡
- true: 捕獲階段.
1.2 可以同時擁有捕獲和冒泡嗎?
1.3同時擁有冒泡和捕獲時,哪個先執(zhí)行?
- 先捕獲::老子--再兒子,再冒泡::兒子--再老子.
1.4特例
- 沒有父子關(guān)系,僅僅有一個元素
- 冒泡和捕獲誰先監(jiān)聽,誰先執(zhí)行.
2 捕獲與冒泡的特性
2.1 捕獲不可取消,但是冒泡可以.
2.2中斷冒泡
- e.stopPropagation()
- 中斷冒泡后,事件不會繼續(xù)傳播.
- 一般用于封裝某些獨(dú)立的組件.
2.3 取消(阻止)默認(rèn)動作
2.4 有些事件不能阻止默認(rèn)動作.
- scroll事件,不可以阻止默認(rèn)動作
- 因為先有滾動,才會有滾動事件.
2.5 如何阻止?jié)L動呢?
- 阻止wheel,或者touchstart的默認(rèn)動作.
- CSS取消滾動條.
2.5 Bubbles 與 Cancelable
- Bubbles的意思是該事件是否冒泡,所有冒泡都可以取消.
- Cancelable的意思是開發(fā)者是否可以阻止默認(rèn)事件.
- Cancelable與冒泡無關(guān).
3 事件委托
3.1什么是事件委托?
- 使用祖先元素監(jiān)聽子孫元素觸發(fā)事件.
3.2 為什么使用事件監(jiān)聽?
- 節(jié)省內(nèi)存
- 可以監(jiān)聽動態(tài)元素.(目前不存在的元素)
4 封裝事件委托
<div id="testDiv">
<li>123</li>
</div>
<script>
let on = function (eventType, parentE, sonE, fn) {
if (!(parentE instanceof Element)) {
el = document.querySelector(parentE);
}
el.addEventListener(eventType, e => {
const target = e.target;
if (t.matches(sonE)) {
fn(e);
}
});
};
on('click', '#testDiv', 'li', e => console.log(e));
</script>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
