jquery on 绑定事件绑定

jQuery on() 方法绑定事件

jQuery 的 on() 方法是事件绑定的核心方法，支持动态元素、多事件绑定和事件委托。以下是常见用法和注意事项：

基本语法

$(selector).on(event, handler);

• event: 事件名称（如 "click"）。
• handler: 事件触发时执行的函数。

绑定多个事件

$(selector).on({
  click: function() { /* 点击事件 */ },
  mouseenter: function() { /* 鼠标进入事件 */ }
});

事件委托（动态元素）

通过将事件绑定到父元素，实现对动态添加的子元素的事件监听：

$(parentSelector).on(event, childSelector, handler);

例如：

$("#container").on("click", ".dynamic-btn", function() {
  alert("按钮被点击");
});

传递数据

可以通过 data 参数向事件处理函数传递额外数据：

$(selector).on("click", { key: "value" }, function(event) {
  console.log(event.data.key); // 输出 "value"
});

一次性事件

使用 one() 方法绑定只触发一次的事件：

$(selector).one("click", function() {
  alert("仅触发一次");
});

解绑事件

使用 off() 方法移除事件绑定：

$(selector).off("click"); // 移除所有点击事件
$(selector).off("click", handler); // 移除特定处理函数

注意事项

• 事件委托的性能优于直接绑定到动态元素。
• 避免过度使用事件委托，尽量将委托范围限制在最近的父级。
• 使用命名空间便于管理事件（如 "click.namespace"）。