事件

定义

用户在外部的操作定义为事件, 常见的事件有:

• 单击
• 双击
• 鼠标位置
• 表单输入
• 提交表单
• 拖拽
• 页面滚动
• 触发/失去焦点
• 键盘按下

事件流

当某个页面的 div 元素触发事件时, 会发生下面一个过程:

DOM 的最上层document会往下寻找触发事件的 DOM, 也就是 1-3 这个过程, 也叫做事件捕获阶段. 然后找到 3 时称为目标阶段, 然后再从目标元素返回到document, 也就是 4-7, 这个阶段又叫事件冒泡阶段. 整个过程被称为事件流.

我们可以使用e.stopPropagation()来阻止事件传播(无论是捕获还是冒泡). 我们使用e.preventDefault()来阻止默认事件的发生.

事件代理

事件代理绑定给代理元素, 由父元素根据事件来源统一处理.它有以下好处:

• 适用于可能会新增子元素的场景

事件代理实际是事件冒泡的应用, 父元素通过监听冒泡回来的信息调用回调. 主要手段是使用e.target或者e.path