当前位置：首页 > jquery

jquery的on

2026-03-16 12:41:39jquery

jQuery的on方法

jQuery的on()方法是用于事件绑定的核心函数，取代了旧版的bind()、live()和delegate()方法。它提供了统一的事件处理接口，支持直接绑定和事件委托。

基本语法

$(selector).on(eventName, handlerFunction);

eventName：事件名称（如click、mouseenter等）。
handlerFunction：事件触发时执行的函数。

事件委托语法

$(parentSelector).on(eventName, childSelector, handlerFunction);

parentSelector：静态父元素选择器。
childSelector：动态子元素选择器（事件实际触发目标）。
适用于动态添加的元素。

多事件绑定

$(selector).on({
  click: function() { /* 处理点击 */ },
  mouseenter: function() { /* 处理鼠标进入 */ }
});

或通过空格分隔事件名：

jquery的on

$(selector).on("click mouseenter", handlerFunction);

传递数据

$(selector).on("click", {key: value}, function(event) {
  console.log(event.data.key); // 输出value
});

通过event.data访问传递的数据。

命名空间

$(selector).on("click.namespace", handlerFunction);

便于批量解绑（如off("click.namespace")）。

注意事项

动态元素需通过事件委托绑定。
性能上，委托比直接绑定更高效（尤其大量元素）。
可用off()解除绑定。

示例代码

// 直接绑定
$("#btn").on("click", function() {
  alert("按钮被点击");
});

// 事件委托
$("#container").on("click", ".item", function() {
  $(this).toggleClass("active");
});

// 多事件+数据传递
$("#element").on("click hover", {id: 123}, function(e) {
  console.log("事件类型:", e.type, "数据ID:", e.data.id);
});