10.事件流

10.1事件流和两个阶段说明

●事件流指的是事件完整执行过程中的流动路径

简单来说：捕获阶段是从父到子 冒泡阶段是从子到父

10.2事件捕获

事件捕获概念：
从DOM的根元素开始去执行对应的事件(从外到里)
●事件捕获需要写对应代码才能看到效果
●代码:

DOM.addEventlistener(事件类型,事件处理函数,是否使用捕获机制)

●说明:
addEventListener第三个参数传入 true 代表是 捕获阶段 触发(很少使用)
若传入false代表冒泡阶段触发，默认就是false
若是用L0事件监听，则只有冒泡阶段，没有捕获

10.3事件冒泡

事件冒泡概念：
当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡
●简单理解：当一个元素触发事件后，会依次向上调用所有父级元素的同名事件
●事件冒泡是默认存在的
●L2事件监听第三个参数是false, 或者默认都是冒泡

10.4阻止冒泡

●问题：因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素
●需求：若想把事件就限制在当前元素内，就需要阻止事件冒泡
●前提：阻止事件冒泡需要拿到事件对象
●语法：

事件对象.stopPropagation( )

●注意：此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效

【示例】

son.addEventListener('click', function (e) {
       alert('son')
       // 阻止流动传播
       e.stopPropagation()
})

我们某些情况下需要阻止默认行为的发生，比如阻止链接的跳转，表单域跳转
●语法:

e.preventDefault( )

【示例】

<form action="http://www.baidu.com">
     <input type="submit" value="提交">
</form>
<script>
     const form = document.querySelector('form')
     form.addEventListener('click', function (e) {
          //阻止表单默认提交行为
          e.preventDefault()
     })
</script>

10.5解绑事件

1.on事件方式，直接使用null覆盖偶就可以实现事件的解绑
语法：

//绑定事件
btn.onclick = function () { 
alert('点击了')
}
//解绑事件
btn.onclick = null

2.addEventListener方式，必须使用:

removeEventListener(事件类型,事件处理函数, [获取捕获或者冒泡阶段])

例如:

function fn() {
alert('点击了')
}
//绑定事件
btn.addEventListener('click', fn)
//解绑事件
btn.removeEventListener('click', fn)

注意：匿名函数无法被解绑

10.6鼠标经过事件

●鼠标经过事件的区别：
➢mouseover 和mouseout会有冒泡效果
➢mouseenter和mouseleave没有冒泡效果（推荐）

10.7两种注册事件的区别