DOM事件模型和DOM事件机制
DOM事件模型本身就是解释元素有绑定函数执行顺序。
什么是DOM?
文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。
什么是DOM事件?
举例，click就是一个事件，可以在后面绑定函数执行功能。事件可以在文档(Document)结构的任何部分被触发，触发者可以是用户操作，也可以是浏览器本身。事件并不是只是在一处被触发和终止；他们在整个document中流动，拥有它们自己的生命周期。
主要分为3个阶段：捕获阶段、冒泡阶段、目标阶段
- 捕获阶段：事件从window对象自上而下向目标节点传播的阶段；
- 捕获：当用户点击按钮时，浏览器会从 window 从上向下遍历至用户点击的按钮，逐个触发事件处理函数。
- 冒泡阶段：事件从目标节点自下而上向window对象传播的阶段（顾名思义像冒泡泡一样从下往上越来越大）。
- 冒泡：浏览器从用户点击的按钮从下往上遍历至 window，逐个触发事件处理函数。
- 目标阶段：真正的目标节点正在处理事件的阶段；
看看示意图
- 一般的顺序是先捕获，再冒泡。(但如果只有一个元素，按照代码执行顺序)
- 这里需要添加事件监听函数：
addEventListener('click', fn, bool) - 如果不传bool的值或者bool值为falsy，fn函数就只在冒泡阶段执行
- 如果bool的值是true，那么fn函数就在捕获阶段执行
取消冒泡
- 捕获不可取消，但冒泡可以
- e.stopPropagation()可以中断冒泡。
scroll事件 不支持取消冒泡
- 是不可阻止的默认事件
- MDN搜索
scroll event - 看到
Bubbles是否冒泡（可取消） Cancelable是否支持开发者取消冒泡
- 要怎么才能禁用滚动呢？
- 可以阻止WHeel和touchstar默认动作
- css滚动条还能用，设置css滚动条width：0；
