jquery 委托

jQuery 事件委托

jQuery 的事件委托是一种高效的事件处理方式，通过将事件绑定到父元素而非子元素上，减少事件监听器的数量，提高性能并支持动态添加的元素。

语法

$(parentSelector).on(eventName, childSelector, eventHandler);

示例

// 委托给父元素 #list，处理子元素 li 的点击事件
$('#list').on('click', 'li', function() {
    console.log($(this).text());
});

优点

• 减少事件监听器的数量，提升性能
• 支持动态添加的元素，无需重新绑定事件
• 简化事件管理，尤其适用于大量子元素

注意事项

• 父元素必须存在于 DOM 中
• 事件冒泡机制使得事件可以从子元素传播到父元素
• 可以使用 off() 方法移除事件委托

与直接绑定的区别

直接绑定需要为每个子元素单独绑定事件，而委托只需绑定到父元素一次，通过事件冒泡机制处理子元素事件。

移除委托

$('#list').off('click', 'li');

动态元素支持

委托可以自动处理后续添加的元素，无需重新绑定：

$('#list').append('<li>New Item</li>'); // 新元素自动支持点击事件

性能优化

对于大量元素，委托比直接绑定更高效，因为减少了事件监听器的数量。