jquery 委托
jQuery 事件委托
事件委托是一种利用事件冒泡机制，将事件处理程序绑定到父元素而非子元素的技术。jQuery 提供了 .on() 方法来实现事件委托。
基本语法
$(parentSelector).on(eventType, childSelector, handlerFunction);参数说明
parentSelector：父元素选择器，事件委托的绑定目标。eventType：事件类型（如"click"、"mouseover"）。childSelector：子元素选择器，实际触发事件的元素。handlerFunction：事件处理函数。
示例代码
// 静态父元素委托
$("#parent").on("click", ".child", function() {
console.log("Child element clicked");
});
// 动态添加元素后仍有效
$("#parent").append("<div class='child'>New Child</div>");动态元素支持
事件委托对动态添加的子元素有效，因为事件是通过父元素冒泡触发的，无需重新绑定。
移除委托事件
使用 .off() 方法移除委托事件：
$("#parent").off("click", ".child");注意事项
- 委托的父元素需在 DOM 加载时存在。
- 过度使用事件委托可能影响性能，建议就近选择父元素。
- 事件对象
event仍指向实际触发事件的子元素。
与直接绑定的区别
// 直接绑定（仅对现有元素有效）
$(".child").click(function() { ... });
// 委托（对现有和未来元素有效）
$("#parent").on("click", ".child", function() { ... });性能优化
- 选择最近的静态父元素作为委托容器。
- 避免在
document或body上过度使用委托。
适用场景
- 动态生成的元素。
- 大量子元素需要相同事件处理。
- 需要减少事件绑定数量的情况。
