jQuery的三种bind/One/Live/On事件绑定使用方法

在前端开发中，事件处理是常见的操作之一。jQuery提供了多种方法来绑定事件以及解除事件绑定，其中包括bind, one, live/on等。

bind方法

bind()方法用于将一个或多个事件处理函数绑定到一个元素上，可以绑定多个事件类型，例如：

$(selector).bind(eventType, [eventData], handler);

• eventType: 必需，表示要绑定的事件类型，如"click"、"mouseover"、"keydown"等。
• eventData: 可选，传递给事件处理程序的额外参数。
• handler: 必需，事件触发时要执行的函数。

$('button').bind('click', function() {
  alert('Button clicked');
});

当点击页面上的任意一个按钮时，都会弹出提示框。

这种方式会为目标元素添加事件监听器，如果目标元素被替换了，那么相应的事件监听器也会丢失。

one方法

one()方法与bind()方法类似，但是它只会绑定事件处理程序执行一次，即事件只会被触发一次。

$("button").one("click", function() {
  alert("Button clicked once.");
});

当按钮被点击时，弹出提示框，但此后再次点击按钮将不再有反应。

这种方式适用于只需要执行一次的操作，比如注册/登录按钮。

live/on方法

live()和on()方法可以在动态加载的元素上绑定事件。live()已经被弃用，推荐使用on()方法。

$(selector).on(eventName, [eventData], handler);

• eventName: 必需，表示要绑定的事件类型，如"click"、"mouseover"、"keydown"等。
• eventData: 可选，传递给事件处理程序的额外参数。
• handler: 必需，事件触发时要执行的函数。

$(document).on('click', 'button', function() {
  alert('Button clicked');
});

当页面中任意一个按钮被点击时，都会弹出提示框。

这种方式会在文档中所有匹配选择器的目标元素上添加事件监听器，即使是在之后动态添加到文档中的元素也会拥有此事件监听器。

解除事件绑定

可以使用unbind()方法来解除通过bind()方法绑定的事件，使用off()方法解除通过live()/on()方法绑定的事件。

$(selector).unbind(eventType, handler);
$(selector).off(eventName, [selector], [handler]);

例如：

$('button').unbind('click', myFunction);

$(document).off('click', 'button', myFunction);

其中，myFunction是事件处理函数。

总结

在前端开发中，事件处理是必不可少的一部分。通过bind()、one()、live()/on()等方法，可以很方便地实现事件绑定和解除绑定的操作。

需要注意的是，不同的绑定方式对性能的影响是不同的。在实际开发中需要根据具体情况进行选择，以达到最优的性能表现。

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