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()方法轻松移除。
