jquery的on
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() { /* 处理鼠标进入 */ }
});或通过空格分隔事件名：
$(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);
});
