jquery中on
jQuery 中的 on() 方法
jQuery 的 on() 方法是用于绑定事件处理程序的核心函数。它取代了旧版的 bind()、delegate() 和 live() 方法，提供了更统一的事件处理方式。
基本语法
$(selector).on(event, childSelector, data, handler);- event: 必需，指定一个或多个事件类型（如 "click"、"mouseenter"）。
- childSelector: 可选，用于事件委托的子元素选择器。
- data: 可选，传递给事件处理函数的额外数据。
- handler: 必需，事件触发时执行的函数。
直接事件绑定
直接为匹配的元素绑定事件处理程序：
$("#button").on("click", function() {
alert("Button clicked!");
});事件委托
通过事件委托处理动态添加的元素：
$("#container").on("click", ".dynamic-item", function() {
console.log("Dynamic item clicked");
});多个事件绑定
同时绑定多个事件类型：
$("#element").on({
mouseenter: function() {
$(this).css("background-color", "yellow");
},
mouseleave: function() {
$(this).css("background-color", "white");
},
click: function() {
$(this).css("background-color", "red");
}
});传递额外数据
向事件处理程序传递自定义数据：
$("#button").on("click", {name: "John"}, function(event) {
alert("Hello " + event.data.name);
});命名空间事件
为事件添加命名空间以便于管理：
$("#element").on("click.custom", function() {
console.log("Namespaced event");
});
// 只移除特定命名空间的事件
$("#element").off("click.custom");一次性事件
使用 one() 方法绑定只触发一次的事件：
$("#button").one("click", function() {
alert("This will only show once");
});注意事项
- 事件委托可以提高性能并处理动态内容
- 使用
off()方法移除事件处理程序 - 过度使用事件绑定可能导致内存泄漏
- 自定义事件也可以通过
on()方法绑定和触发
