jquery on事件绑定
jQuery on 事件绑定基础
jQuery 的 on() 方法是用于事件绑定的核心函数，支持动态元素事件委托和直接绑定。基本语法如下：
$(selector).on(eventName, handlerFunction);eventName：事件名称字符串（如"click"）。handlerFunction：事件触发时执行的函数。
示例：点击事件绑定
$("#myButton").on("click", function() {
alert("Button clicked!");
});事件委托
通过 on() 可实现事件委托，将事件绑定到父元素并过滤子元素触发。语法：
$(parentSelector).on(eventName, childSelector, handlerFunction);示例：动态列表项点击
$("#listContainer").on("click", "li", function() {
console.log($(this).text());
});此例中，即使 li 是动态添加的，点击事件仍会触发。
多事件绑定
on() 支持同时绑定多个事件，用空格分隔事件名：
$("#element").on("mouseenter mouseleave", function() {
$(this).toggleClass("highlight");
});或使用对象形式为不同事件指定不同处理函数：
$("#element").on({
click: function() { /* 点击逻辑 */ },
mouseenter: function() { /* 悬停逻辑 */ }
});传递数据
可通过 data 参数向事件处理函数传递额外数据：
$("#element").on("click", { key: "value" }, function(event) {
console.log(event.data.key); // 输出 "value"
});命名空间
为事件添加命名空间便于管理（如批量解绑）：
$("#element").on("click.customNamespace", handler);
// 解绑特定命名空间事件
$("#element").off("click.customNamespace");注意事项
- 动态元素需使用事件委托（通过父元素绑定）。
- 避免过度使用事件委托，可能影响性能。
- 使用
off()解绑事件防止内存泄漏。 - jQuery 3.0+ 中
on()是推荐的事件绑定方法，替代了旧的bind()、live()等。
性能优化示例
// 直接绑定（静态元素）
$(".static-element").on("click", handler);
// 事件委托（动态元素）
$(document).on("click", ".dynamic-element", handler);
