on() jquery
on() 方法的基本用法
on() 是 jQuery 中用于事件绑定的核心方法，可替代早期的 bind()、delegate() 和 live()。语法如下：
$(selector).on(event, childSelector, data, handler);- event：必填，指定事件类型（如
"click"、"mouseenter"）。 - childSelector：可选，用于事件委托的子元素选择器。
- data：可选，传递给事件处理函数的额外数据。
- handler：必填，事件触发时执行的函数。
绑定简单事件
直接绑定事件到现有元素：
$("#button").on("click", function() {
alert("Button clicked!");
});事件委托
通过子选择器为动态添加的元素绑定事件：
$("#parent").on("click", ".dynamic-child", function() {
console.log("Child element clicked");
});此例中，即使 .dynamic-child 是后续添加到 #parent 中的，事件仍有效。
传递额外数据
通过 data 参数传递数据到处理函数：
$("#element").on("click", { key: "value" }, function(event) {
console.log(event.data.key); // 输出 "value"
});多事件绑定
同时绑定多个事件，用空格分隔事件名：
$("#box").on("mouseenter mouseleave", function() {
$(this).toggleClass("highlight");
});一次性事件
使用 one() 替代 on() 可使事件仅触发一次：
$("#temp-button").one("click", function() {
alert("This will only fire once.");
});移除事件
通过 off() 解除绑定：
$("#button").off("click"); // 移除所有 click 事件
$("#button").off("click", specificHandler); // 移除特定处理函数注意事项
- 事件委托需确保父元素在绑定时已存在。
- 动态元素建议使用委托模式避免重复绑定。
- 避免过度使用匿名函数，以便后续可通过引用移除事件。
完整文档参考 jQuery API。
