jquery .on
jQuery .on() 方法
jQuery 的 .on() 方法是一个多功能的事件处理函数，用于为选定的元素绑定一个或多个事件处理程序。它是 jQuery 事件绑定的推荐方法，取代了旧的 .bind()、.live() 和 .delegate() 方法。
基本语法
$(selector).on(event, childSelector, data, handler);- event: 必需，指定一个或多个事件类型，多个事件用空格分隔。
- childSelector: 可选，指定子元素选择器，用于事件委托。
- data: 可选，传递给事件处理函数的额外数据。
- handler: 必需，事件触发时执行的函数。
常见用法
绑定点击事件到按钮
$("#myButton").on("click", function() {
alert("Button clicked!");
});绑定多个事件
$("#myElement").on("mouseenter mouseleave", function() {
$(this).toggleClass("highlight");
});使用事件委托
$("#parentElement").on("click", ".childElement", function() {
console.log("Child element clicked");
});传递额外数据
$("#myElement").on("click", {name: "John"}, function(event) {
console.log("Hello " + event.data.name);
});移除事件处理程序
使用 .off() 方法移除事件处理程序
$("#myButton").off("click");一次性事件
使用 .one() 方法绑定只触发一次的事件
$("#myButton").one("click", function() {
alert("This will only show once!");
});命名空间事件
可以为事件添加命名空间，方便管理
$("#myElement").on("click.myNamespace", function() {
console.log("Namespaced click event");
});
// 只移除特定命名空间的事件
$("#myElement").off("click.myNamespace");自定义事件
可以触发自定义事件
$("#myElement").on("customEvent", function() {
console.log("Custom event triggered");
});
$("#myElement").trigger("customEvent");注意事项
- 使用事件委托时，确保父元素在绑定事件时已存在于 DOM 中
- 避免过度使用事件委托，可能会影响性能
- 在移除元素前记得解绑事件，防止内存泄漏
- jQuery 3.0 以后，
.on()是唯一推荐的事件绑定方法
