jquery 代理
jQuery 事件代理(事件委托)
jQuery 的事件代理(也称为事件委托)是一种利用事件冒泡机制将事件处理程序绑定到父元素而非子元素的技术。这种方法特别适用于动态添加的元素或大量子元素,能显著提升性能。

基本语法
使用 on() 方法实现事件代理:

$(父元素选择器).on(事件类型, 子元素选择器, 回调函数);
示例代码
为动态添加的按钮绑定点击事件:
$("#container").on("click", ".dynamic-btn", function() {
alert("按钮被点击");
});
核心优势
- 动态元素支持:无需为新增元素重复绑定事件。
- 性能优化:减少事件监听器数量,尤其适用于列表或表格。
- 内存效率:避免因元素移除导致的内存泄漏。
注意事项
- 事件类型需明确指定(如
click、mouseover)。 - 子元素选择器需准确匹配目标元素。
- 避免过度委托导致事件冒泡层级过深。
与传统绑定的对比
// 传统绑定(仅对现有元素有效)
$(".btn").click(function() { ... });
// 事件代理(对现有及未来元素有效)
$("#parent").on("click", ".btn", function() { ... });
移除代理事件
使用 off() 方法:
$("#container").off("click", ".dynamic-btn");
适用场景
- 列表项操作(如删除、编辑)。
- 动态加载内容(如 AJAX 返回的数据)。
- 大量相似元素的交互(如表格行点击)。






