快速理解事件委派

概念

利用冒泡机制实现对元素的时间处理程序。即,把对该元素要进行的事件处理,利用冒泡机制,将其处理程序绑定到(委派)祖先级(一般为父级)上进行执行。

要理解事件委派,先掌握两个概念—— 捕获与冒泡

捕获与冒泡

假设我们点击页面上的一个元素,这个过程会存在捕获和冒泡阶段。

捕获阶段

从祖先元素一级一级地遍历到点击的元素所在节点的过程,叫捕获阶段。其所经历的元素都会触发点击事件(因为这里是以'click'事件为例子)

冒泡阶段

在捕获结束后已经落在了所点击元素的节点了,接着跟着原来捕获的过程反向遍历。其所经历的元素都会触发点击事件(因为这里是以'click'事件为例子)

举个例子吧

例如你点的元素的层级结构是这样的:

body > div > span

那么捕获阶段的过程就是按照上述结构的顺序,而冒泡的顺序就是这样

span > div > body

所以这里再描述一下事件委派,以上述说的结构为例子,假设我原本要对span元素绑定一个click事件,但是我没有直接绑定到它身上,而是绑定到它的父级元素div上,因此我点击了span,先经过捕获阶段,再经历冒泡阶段,当冒泡到div时,就会触发它的绑定事件了。这就叫事件委派

事件绑定

事件委派,从名字上理解,就是把一个元素要进行的事件处理程序委派出去。所以我们要知道事件绑定。

事件绑定可以分为四类,哪四类看看这篇文章就知道了 看了跟不看没区别的文章—摒弃e || window.event旧认识

这里要实现事件委派就要用到最高级的方式,addEventListener,IE8以下用attachEvent

语法

target.addEventListener(type, listener[, useCapture]);
参数 描述
type String,事件名称,不带'on',如'click'
listener Funtcion,事件处理程序,触发type事件要执行的脚本
useCapture Boolean,默认为false,指定listener在哪个阶段执行。false为冒泡,true为捕获阶段

因此,事件委派利用冒泡机制,就是把这里的useCapture参数设置为false

使用场景

场景一

当你有很多元素需要进行绑定监听同一个事件执行同一个操作时,如ul下的li元素,假设你有一百个甚至多个,你也不想一个个li遍历了然后绑定监听事件吧。这时候你只需要利用事件委派对其父元素ul绑定一个监听事件即可。

场景二

某个父元素下有多个元素需要进行监听同一事件但执行不同操作,同样可以不需要为每个元素绑定事件,只需要对其父元素绑定这个监听事件,然后从事件内部区分哪个元素,然后执行对应的事件。

场景三

你要监听的对象不确定是否已经存在于DOM中,如果不存在的话,你是没办法获取到这个对象然后进行事件绑定。那么就可以使用事件委派了,对其父元素监听事件,就算此刻不存在与DOM中,后续渲染了之后也能正常执行到监听事件处理程序

优点

  1. 减少DOM的交互操作,进而减少页面的重绘和重排
  2. 减少内存。如果一个个元素绑定监听函数,一个函数就是一个内存,就会占用较多内存。如果统一绑定到父元素上,就只有一个函数占用一个内存了。
  3. 对不确定是否存在DOM上的元素进行事件监听,用事件委派就可以解决监听问题。
发布了68 篇原创文章 · 获赞 32 · 访问量 14万+

猜你喜欢

转载自blog.csdn.net/Web_J/article/details/102482249
今日推荐