本文将会记录的会有以下知识点

• DOM捕获阶段和冒泡阶段
• 阻止冒泡的方法
• 事件委托
• target与currentTarget

DOM捕获阶段和冒泡阶段

DOM事件流：事件流描述的是从页面中接收事件的顺序。（事件传播的过程就是事件流）

包括三个阶段：

事件捕获阶段该阶段的主要作用是捕获截取事件

处于目标阶段一般地，该阶段具有双重范围，即捕获阶段的结束，冒泡阶段的开始;

事件冒泡阶段主要作用是将目标元素绑定事件执行的结果返回给浏览器，处理不同浏览器之间的差异，主要在该阶段完成

捕获 当用户点击按钮，浏览器会从 window 从上向下遍历至用户点击的按钮，逐个触发事件处理函数。

冒泡 浏览器从用户点击的按钮从下往上遍历至 window，逐个触发事件处理函数。

什么是捕获阶段？

当监听事件 addEventLister 的第三个参数为true则处于捕获阶段

**事件捕获阶段：**如果上级有事件，则就会执行先执行上级的事件，再执行点击事件（执行顺序为：爷爷事件——>爸爸事件——>儿子事件）

什么是冒泡阶段？

第三个参数不填或为false

**事件冒泡阶段：**先执行被点击的元素事件，再一层一层执行上级事件（执行顺序为：被点击事件——>爸爸事件——>爷爷事件）

是想执行冒泡阶段和还是捕获阶段？

//IE浏览器是执行冒泡阶段
IE5*：baba.attachEvent（'onclick'，fn）
//捕获
网景：baba.addEventListener（'click'；fn）
 //现在都使用w3c的标准，由第三个参数控制冒泡还是捕获，不填或者false就是冒泡阶段
 W3C：baba.addEventListener（'click；，fn，bool）

阻止冒泡的方法

使用 e.stopPropagation() 可以中断冒泡

但是有些事件此方法没有效果，比如说  scroll滚动事件

阻止滚动事件的方法

阻止scroll默认动作没有用，因为有滚动才有滚动事件，要想阻止滚动，需要阻止whell和touchstart的默认动作

禁用滚动事件

元素.addEventListener('whell',(e)=>{
  e.preventDefault()
})

此时使用鼠标滚轮没有用了，但是还有滚动条 把滚动条隐藏

::-webkit-scrollbar {
  width: 0 !important
}

禁用手机端的滚动事件

元素.addEventListener('touchstart',(e)=>{
  e.preventDefault()
})

事件委托

当监听子元素时，事件冒泡会通过目标元素向上传递到父级，直到document，如果子元素不确定或者动态生成，可以通过监听父元素来取代监听子元素。

 function on(eventType, element, selector, fn) {
            if (!(element instanceof Element)) {
                element = document.querySelector(element)
            }
            element = addEventListener(eventType, (e) => {
                const t = e.target
                if (t.matches(selector)) {
                    fn(e)
                }
            })
        }
        on('click', '#div1', 'button', () => {
            console.log('buton被点击了')
        })

target与currentTarget

target是被操作（被点击）的元素

currentTarget是程序员监听的元素