jquery .on

jQuery .on() 方法

jQuery 的 .on() 方法用于为选定的元素绑定一个或多个事件处理函数。它是 jQuery 事件绑定的推荐方式，取代了旧的 .bind()、.delegate() 和 .live() 方法。

基本语法

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

参数说明

• event：一个或多个事件类型的字符串，多个事件用空格分隔。
• handler：事件触发时执行的函数。
• data（可选）：传递给事件处理函数的额外数据。
• selector（可选）：用于事件委托的子元素选择器。

示例代码

// 绑定点击事件
$("#myButton").on("click", function() {
    alert("Button clicked!");
});

// 绑定多个事件
$("#myDiv").on("mouseenter mouseleave", function() {
    $(this).toggleClass("highlight");
});

// 事件委托
$("#parent").on("click", ".child", function() {
    alert("Child element clicked!");
});

事件委托

事件委托允许将事件绑定到父元素，但仅在匹配的子元素触发事件时执行处理程序。这对于动态添加的元素非常有用。

// 动态添加的元素也能触发事件
$("#list").on("click", "li", function() {
    $(this).css("color", "red");
});

传递数据

可以通过 .on() 方法传递额外的数据给事件处理函数。

$("#myElement").on("click", {name: "John"}, function(event) {
    alert("Data passed: " + event.data.name);
});

移除事件

使用 .off() 方法可以移除通过 .on() 绑定的事件。

// 移除所有事件
$("#myButton").off();

// 移除特定事件
$("#myButton").off("click");

注意事项

• .on() 方法支持所有 jQuery 事件类型，如 click、mouseenter、keydown 等。
• 事件委托可以提高性能，尤其是在处理大量动态元素时。
• 使用 .on() 绑定的事件可以通过 .off() 方法轻松移除。