jQuery live() vs. on() 方法

在前端开发中，添加事件处理程序是非常重要的。jQuery 包含两种不同的方法：live() 和 on()，它们都能够动态添加事件监听器。然而，它们有不同的应用场景，本文将对它们进行详细介绍和比较，并提供示例代码。

jQuery live() 方法

live() 是 jQuery 中一个被废弃的方法，它可以给指定的元素添加事件处理程序，即使这些元素尚未存在于 DOM 中也能生效。它的语法如下：

$(selector).live(event, handler);

其中，selector 表示需要绑定事件的元素，event 是事件类型，handler 是事件处理程序。例如，我们需要给页面上所有的按钮添加 click 事件：

$("button").live("click", function() {
  alert("Button clicked!");
});

这个代码将会给页面上所有的 button 元素绑定 click 事件监听器。

然而，由于 live() 方法会为每个匹配的元素创建事件代理，并且这些事件代理可能会导致性能问题，因此在 jQuery 1.7 版本之后，live() 方法被废弃了。

jQuery on() 方法

on() 是 jQuery 中推荐的方法，它可以为当前匹配的元素或其子元素（包括动态添加的元素）添加事件监听器。它的语法如下：

$(selector).on(event, childSelector, data, handler);

其中，selector 表示需要绑定事件的元素，event 是事件类型，childSelector 是子元素选择器（可选），data 是传递给处理程序的数据（可选），handler 是事件处理程序。

例如，我们需要给页面上所有的按钮添加 click 事件：

$("button").on("click", function() {
  alert("Button clicked!");
});

这个代码将会给页面上所有的 button 元素绑定 click 事件监听器。

另外，如果我们需要对动态添加的元素进行事件监听，在 on() 方法中用 childSelector 参数指定子元素的选择器即可。例如，我们需要对所有的 class 为 container 的 div 元素内的 button 元素添加 click 事件监听器：

$(".container").on("click", "button", function() {
  alert("Button clicked!");
});

这个代码将会在 .container 元素下的所有 button 元素被点击时触发事件监听器。

区别和使用建议

• live() 方法是基于事件冒泡机制实现的，而 on() 方法是基于事件委托机制实现的。因此，on() 方法相比于 live() 方法性能更好，尤其是在有大量事件处理程序的情况下。
• live() 方法只能绑定前面存在 DOM 中的元素，而 on() 方法可以绑定后期添加的元素。
• 在 jQuery 1.7 版本之后，live() 方法已经被废弃，不建议使用。

因此，在实际开发中，我们应该优先选择 on() 方法来动态添加事件监听器。

示例代码

给页面上所有的按钮添加 click 事件：

$("button").on("click", function() {
  alert("Button clicked!");
});

在 .container 元素下的所有 button 元素被点击时触发事件监听器：

$(".container").on("click", "button", function() {
  alert("Button clicked!");
});

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/9134