Jquery.on

jQuery.on() 方法详解

jQuery.on() 是 jQuery 中用于事件绑定的核心方法，支持动态元素事件委托。它取代了旧版的 .bind(), .live(), 和 .delegate() 方法，提供更统一的事件处理方式。

基本语法

$(selector).on(eventName, handlerFunction);

• eventName: 字符串，指定事件类型（如 "click", "mouseenter"）。
• handlerFunction: 事件触发时执行的函数。

事件委托语法

$(staticParent).on(eventName, dynamicChildSelector, handlerFunction);

• staticParent: 静态存在的父元素选择器。
• dynamicChildSelector: 动态子元素的选择器字符串。
• 原理：利用事件冒泡机制，在父元素上监听子元素触发的事件。

多事件绑定

$(selector).on({
  click: clickHandler,
  mouseenter: mouseenterHandler
});

• 以对象形式同时绑定多个事件类型。

传递额外数据

$(selector).on("click", {customData: 123}, handlerFunction);

• 通过第二个参数传递数据对象，在 handler 中通过 event.data 访问。

命名空间

$(selector).on("click.namespace", handlerFunction);

• 方便批量管理事件，如通过 .off("click.namespace") 移除特定命名空间下的事件。

注意事项

• 动态元素必须使用事件委托语法绑定。
• 避免过度使用事件委托，尽量靠近目标元素绑定。
• 通过 .off() 方法移除事件，防止内存泄漏。
• 事件对象参数包含跨浏览器兼容的属性如 target, pageX, preventDefault() 等。

性能优化建议

• 对高频事件（如 scroll, mousemove）使用节流/防抖。
• 在不需要时及时解绑事件。
• 委托层级不宜过深，通常 2-3 层为宜。