DOM 事件模型

首先按爷爷=>爸爸=>儿子顺序看有没有函数监听

然后按儿子=>爸爸=>爷爷顺序看有没有函数监听

有监听函数就调用，并提供事件信息，没有就跳过

从外向内找监听函数，叫事件捕获

从内向外找监听函数，叫事件冒泡

W3C 事件模型

• 先捕获（先爸爸=>儿子）再冒泡（再儿子=>爸爸）
• 注意 e 对象被传给所有监听函数
• 事件结束后，e 对象就不存在了

target v.s. currentTarget

• e.target - 用户操作的元素
• e.currentTarget - 程序员监听的元素
• this 是 e.currentTarget，我个人不推荐使用它

举例

• div > span{文字}，用户点击文字
• e.target 就是 span
• e.currentTarget 就是 div

取消冒泡

捕获不可取消，但冒泡可以

• e.stopPropagation() 可中断冒泡，浏览器不再向上走
• 通俗来说：有人打我，我自己解决，别告诉我老子
• 一般用于封装某些独立的组件

不可阻止默认动作

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

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

如何阻止滚动

scroll 事件不可阻止默认动作

• 阻止 scroll 默认动作没用，因先有滚动才有滚动事件
• 要阻止滚动，可阻止 wheel 和 touchstart 的默认动作
• 注意你需要找准滚动条所在的元素
• 但是滚动条还能用，可用 CSS 让滚动条 width: 0 使用 overflow: hidden 可以直接取消滚动条 但此时 JS 依然可以修改 scrollTop

事件委托

由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件，通俗的说，就是让祖先监听儿孙，这种方法叫做事件委托

优点

• 省监听数（内存）
• 可以监听动态元素

Event对象常见的应用

event. preventDefault()阻止默认事件

如果调用这个方法，默认事件行为将不再触发。 什么是默认事件呢？例如表单一点击提交按钮(submit)跳转页面、a标签默认页面跳转或是锚点定位等。

event.stopPropagation()阻止事件冒泡

当事件使用event.stopPropagation()方法将阻止事件冒泡到父元素，阻止任何父事件处理程序被执行