DOM事件流和事件委托

130 阅读1分钟

事件流

事件流分为三个阶段

  • 事件捕获阶段--(从 Window)向下走近元素。
  • 处于目标阶段-- 事件到达目标元素。
  • 事件冒泡阶段-- 事件从元素上开始冒泡。 事件捕获:通俗来说就是,有DOM事件发生时,会先从根节点开始由外到内的进行事件传播直到目标元素,比如点击了子元素,从根节点开始查询是否有绑定了点击事件,有限触发了已经绑定了事件的元素。 事件冒泡:刚好与事件捕获相反,顺序由内到外进行事件传播直到根节点。

示意图

事件流.png

事件委托

由于事件会在冒泡阶段向上传播到父节点,因此可以在父节点上绑定监听函数,由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件委托。
优点:
1、这样可以减少内存提高性能,因为函数是对象,会占用内存,内存中的对象越多,性能越差
2、动态绑定事件:很多时候,我们需要通过用户操作动态的增删列表项元素,如果一开始给每个子元素绑定事件,那么在列表发生变化时,就需要重新给新增的元素绑定事件,给即将删去的元素解绑事件,如果用事件代理就会省去很多这样麻烦。