DOM捕获阶段和冒泡阶段

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
e 会在事件结束之后自动消亡，如果在setTimeout定时操作里使用e，则会报错：如下代码则会报错

x1.addEventListener('click', (e) => {
  setTimeout(() => {
    e.currentTarget.classList.remove('x')
  }, 1000)
})

解决方法：就是把e记下来

x1.addEventListener('click', (e) => {
  const t = e.currentTarget
  setTimeout(() => {
    t.classList.remove('x')
  }, 1000)
})

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

currentTarget是程序员监听的元素

---

欢迎关注公众号：oldCode
后台回复：js思维导图
即可获取js的思维导图知识点

							学习的时光总是短暂，又到了时候说拜拜
								欢迎关注公众号  oldCode
									获取新鲜教程资料