1 事件阶段

• 事件捕获阶段: 从Window->Document->html--->到具体的target
• 事件冒泡阶段: 从target-->Window

1.1 事件阶段只能二选一

• addEventListener(type,fn,boolean)
• boolean: 默认false,冒泡
• true: 捕获阶段.

1.2 可以同时拥有捕获和冒泡吗?

• 可以分别绑定冒泡和捕获

1.3同时拥有冒泡和捕获时,哪个先执行?

• 先捕获::老子--再儿子,再冒泡::儿子--再老子.

1.4特例

• 没有父子关系,仅仅有一个元素
• 冒泡和捕获谁先监听,谁先执行.

2 捕获与冒泡的特性

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

2.2中断冒泡

• e.stopPropagation()
• 中断冒泡后,事件不会继续传播.
• 一般用于封装某些独立的组件.

2.3 取消(阻止)默认动作

• e.preventDefault();

2.4 有些事件不能阻止默认动作.

• scroll事件,不可以阻止默认动作
• 因为先有滚动,才会有滚动事件.

2.5 如何阻止滚动呢?

1. 阻止wheel,或者touchstart的默认动作.
2. CSS取消滚动条.

2.5 Bubbles 与 Cancelable

• Bubbles的意思是该事件是否冒泡,所有冒泡都可以取消.
• Cancelable的意思是开发者是否可以阻止默认事件.
• Cancelable与冒泡无关.

3 事件委托

3.1什么是事件委托?

• 使用祖先元素监听子孙元素触发事件.

3.2 为什么使用事件监听?

• 节省内存
• 可以监听动态元素.(目前不存在的元素)

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>