此页内容

约 493 字大约 2 分钟

2022-04-15

提问

  1. 什么是事件?
  2. 标准事件模型
  3. 什么是事件委托?

事件

事件是 在浏览器窗口中被触发并且通常被绑定在窗口内部的特定部分。 可能是一个元素、一系列元素、被加载到这个窗口的HTML代码,或者整个浏览器窗口。

比如:

  • 用户对页面进行的操作,如 点击鼠标或悬停光标、按下键盘某个按键、调整浏览器的大小
  • 网页停止加载
  • 提交表达
  • 发生错误

标准事件模型

DOM标准事件模型指的是 DOM2事件模型。

在标准事件模型中,一次事件的发生有三个阶段:

  1. 事件捕获阶段。事件从window对象自上而下向目标节点传播的阶段;
  2. 目标阶段。 真正的目标节点正在处理事件的阶段;
  3. 冒泡阶段:事件从目标节点自下而上向window对象传播的阶段。

事件委托

事件委托本质上是利用浏览器事件冒泡的机制。因为事件在冒泡过程中会上传到父节点, 并且父节点可以通过事件对象获取到目标节点,因此可以吧子节点的监听函数定义在父节点上, 由父节点的监听函数统一处理多个子元素的事件,这种方式称为 事件代理 或者 事件委托。

使用事件委托,就可以不必要为每一个子元素都绑定一个监听事件,这样减少了内存上的消耗。 并且使用事件委托,可以实现事件的动态绑定,比如新增了一个子节点,就不需要单独地为它添加一个监听事件, 节点发生的事件会交给父元素中的监听函数来处理。