1 事件階段

• 事件捕獲階段: 從Window->Document->html--->到具體的target
• 事件冒泡階段: 從target-->Window

1.1 事件階段只能二選一

• addEventListener(type,fn,boolean)
• boolean: 默認false,冒泡
• true: 捕獲階段.

1.2 可以同時擁有捕獲和冒泡嗎?

• 可以分別綁定冒泡和捕獲

1.3同時擁有冒泡和捕獲時,哪個先執(zhí)行?

• 先捕獲::老子--再兒子,再冒泡::兒子--再老子.

1.4特例

• 沒有父子關(guān)系,僅僅有一個元素
• 冒泡和捕獲誰先監(jiān)聽,誰先執(zhí)行.

2 捕獲與冒泡的特性

2.1 捕獲不可取消,但是冒泡可以.

2.2中斷冒泡

• e.stopPropagation()
• 中斷冒泡后,事件不會繼續(xù)傳播.
• 一般用于封裝某些獨立的組件.

2.3 取消(阻止)默認動作

• e.preventDefault();

2.4 有些事件不能阻止默認動作.

• scroll事件,不可以阻止默認動作
• 因為先有滾動,才會有滾動事件.

2.5 如何阻止?jié)L動呢?

1. 阻止wheel,或者touchstart的默認動作.
2. CSS取消滾動條.

2.5 Bubbles 與 Cancelable

• Bubbles的意思是該事件是否冒泡,所有冒泡都可以取消.
• Cancelable的意思是開發(fā)者是否可以阻止默認事件.
• 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>