jQuery事件委托

作者：System 时间：2024年08月07日分类：所有,jquery 字数：726

在jQuery中，事件委托是一种简化事件处理方式，可以将事件监听器绑定到一个父元素上，而不是每个子元素单独设置。这样，即使是后来添加到DOM中的元素也会有相同的事件行为。

事件委托通常使用.on()方法实现，格式如下：




$(parentSelector).on(eventType, childSelector, function() {
    // 事件处理代码
});

例子：

假设有一个无序列表，我们想要为列表中的所有列表项添加点击事件，但列表项是动态添加的。

HTML:




<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <!-- 更多列表项 -->
</ul>

jQuery:




$('#myList').on('click', 'li', function() {
  alert('List item clicked: ' + $(this).text());
});

当用户点击任何#myList下的li元素时，会弹出一个带有元素文本的警告框。即使在绑定事件之后添加新的列表项，它们也将有相同的点击事件行为。