jQuery | 委托()方法

在学习 jQuery 时，你可能会经常听到“委托”这个词。那么什么是委托？为什么在 jQuery 中委托方法那么常用呢？本篇文章将详细介绍 jQuery 中的委托方法。

委托方法是什么？

在 jQuery 中，当我们需要对某些元素添加事件时，我们可以使用 on 方法来绑定事件：

$('button').on('click', function() {
  console.log('clicked');
});

这段代码可以让页面上所有的 button 元素在点击时都会输出 clicked。

那么如果有很多个 button 元素呢？难道我们需要给每一个元素都绑定一个事件？

在 jQuery 中，委托方法就是用来解决这个问题的。我们可以将事件绑定在祖先元素上，然后通过选择器指定一个或多个后代元素来触发事件。

如何使用委托方法？

使用 on 方法中的第二个参数就可以设置委托：

$('body').on('click', 'button', function() {
  console.log('clicked');
});

这段代码会在 body 元素上绑定一个 click 事件。当用户点击 body 中的 button 元素时，就会触发该事件。

也可以使用 delegate 方法来委托事件：

$('body').delegate('button', 'click', function() {
  console.log('clicked');
});

以上两段代码的作用是一样的：将 click 事件绑定到了 body 元素上，并指定了 button 元素作为触发元素。

为什么使用委托方法？

使用委托方法可以使代码更加简洁、高效。当页面中存在大量元素时，给每个元素都绑定事件会使得页面的性能下降。而使用委托方法，只需给祖先元素绑定一个事件，就可以使得所有后代元素都会触发该事件，从而提升页面性能。

此外，使用委托方法还有一个好处：动态元素的绑定。如果在页面上动态添加元素，那么之前绑定的事件并不会作用于新添加的元素。而使用委托方法，因为是绑定在祖先元素上的，所以无论何时添加的元素都可以触发事件。

总结

在 jQuery 中，使用委托方法可以简化代码，提高性能，还可以解决动态元素绑定的问题。如果你还没有使用委托方法，那么赶快试试吧！

参考链接

• jQuery 文档 | 委托事件
• w3schools | jQuery on() Method
• 知乎 | 用 jquery 的委托最终我理解了什么是事件冒泡