jquery事件代理
jQuery 事件代理
jQuery 的事件代理（Event Delegation）是一种高效的事件处理方式，通过将事件监听器绑定到父元素而非子元素上，利用事件冒泡机制动态处理子元素的事件。这种方式特别适合动态生成的 DOM 元素或大量子元素的情况。
事件代理的基本语法
使用 on() 方法实现事件代理，语法如下：
$(parentSelector).on(eventType, childSelector, handlerFunction);parentSelector：静态存在的父元素选择器。eventType：事件类型（如"click"、"mouseover"）。childSelector：需要代理的子元素选择器。handlerFunction：事件触发时执行的函数。
示例代码
// 静态父元素 ul 代理动态 li 的点击事件
$("#list").on("click", "li", function() {
console.log($(this).text()); // 输出被点击的 li 内容
});优势
- 动态元素支持：子元素无需预先存在，适合 AJAX 或动态生成的 DOM。
- 性能优化：减少直接绑定事件的数量，尤其适用于列表或表格等大量子元素。
- 内存效率：单个父元素监听替代多个子元素监听，降低内存占用。
注意事项
- 事件冒泡必须未被阻止（如子元素未调用
stopPropagation()）。 - 父元素需为静态存在（非动态生成），否则代理失效。
替代方法
旧版 jQuery 使用 delegate()，但已被 on() 取代：
// 旧版写法（不推荐）
$("#list").delegate("li", "click", handlerFunction);移除事件代理
使用 off() 方法移除代理事件：
$("#list").off("click", "li");实际应用场景
- 无限滚动列表中的项目点击。
- 表格行或单元格的交互。
- 动态加载的按钮或链接事件处理。
