jquery 委托

jQuery 事件委托

jQuery 的事件委托是通过 on() 方法实现的，允许将事件处理程序绑定到一个父元素上，由其子元素触发事件。这种方式特别适合动态生成的元素或需要优化性能的场景。

基本语法

$(parentSelector).on(eventType, childSelector, handlerFunction);

• parentSelector: 静态存在的父元素选择器。
• eventType: 事件类型（如 "click"、"mouseover"）。
• childSelector: 动态子元素的选择器。
• handlerFunction: 事件触发时执行的函数。

示例代码

// 静态父元素 #list 监听子元素 .item 的点击事件
$("#list").on("click", ".item", function() {
    alert("子元素被点击");
});

动态元素支持

事件委托允许为后续动态添加的元素绑定事件，无需重新绑定：

// 动态添加子元素后仍可触发事件
$("#list").append("<li class='item'>新项目</li>");

性能优势

通过减少事件监听器的数量（从多个子元素改为一个父元素），节省内存并提升性能。

移除委托事件

使用 off() 方法移除委托事件：

$("#list").off("click", ".item");

注意事项

• 父元素必须存在于 DOM 中且为非动态。
• 事件冒泡机制使得委托可行，但可能需用 event.stopPropagation() 阻止冒泡。