什么是事件委托？事件委托的原理以及优缺点

事件委托又称事件代理, 下面将要将要简要叙述一下这种方法的原理及优点

一什么是事件委托?

我们看下面的例子:

假使我们需要对 3 个 li 元素添加点击事件:

传统的方法是分别给每个 li 元素绑定 click 事件

假使 li 元素特别多呢? 可能你已经想到这样一个一个添加 click 事件是相当麻烦的, 那么是否有优化方法呢?

当然, 我们只需要在 ul 元素上添加一个事件处理程序这种在 DOM 树中尽量最高的层次上添加事件处理程序的方式便是事件委托, 主要用于解决事件处理程序过多问题

二事件委托如何工作?

我们现在的疑问是: ul 元素如何知道 li 元素点击了呢?

很简单, 由于所有 li 元素都是 ul 元素的子节点, 故他们的事件会冒泡, 无论点击哪个 li 元素, 实际上都相当于点击了 ul 元素

现在产生了另一个问题: ul 元素如何知道是在哪个 li 元素上点击的呢?

我们很容易想到, 在 ul 的事件处理程序中检测事件对象的 target 属性, 就可以得到真正点击的目标元素

三事件委托的优点

首先, 我们看到添加的事件处理程序减少, 可以只有一个事件处理程序由于每个函数都是对象, 对象会占用内存, 内存的占用关系到性能因此第一个优点是:

减少了内存占用, 性能更好;

在访问 DOM 方面, 也使得 DOM 访问次数减少试想一下, 如果要为许多的 DOM 元素绑定事件, 自然需要多次访问 DOM 元素, 设置事件处理程序所需时间更长, 整个页面就绪需要的时间越多因此第二个优点是:

设置事件处理程序所需时间更少, 加快了整个页面的交互就绪时间

假使我们将事件处理程序绑定到 document 对象上, 只要可单击的元素呈现在页面上, 就可以立即具备适当的功能即还会有一个额外的优点:

document 很快就可以访问, 而且可以在页面生命周期的任何时点添加事件处理程序, 而不用等待其他事件完成如 DOMContentLoadedload 事件