$(document).on() - 使用Javascript进行事件委托

$(document).on() 是jQuery库中的一个方法，它用于在一个元素或一组元素上绑定事件处理程序，即事件委托。利用事件委托，我们可以处理动态添加的元素或减少事件处理程序的数量，提高性能。

使用语法

$(selector).on(event, childSelector, data, handler);

• selector：一个选择器字符串，用于选择要绑定事件处理程序的元素。
• event：一个字符串，表示要绑定的事件类型，如 "click" 或 "keydown"。
• childSelector：一个选择器字符串，用于指定要绑定事件处理程序的子元素。
• data：传递给事件处理程序的数据对象，可选。
• handler：一个函数，在事件触发时执行。

示例

假设我们有以下HTML结构：

<div id="parent">
  <p>元素1</p>
  <p>元素2</p>
  <p>元素3</p>
</div>

如果我们要在 <p> 元素上绑定点击事件处理程序，我们可以使用 $(document).on()：

$(document).on('click', '#parent p', function() {
  // 在点击 <p> 元素时执行的代码
});

当用户点击 <p> 元素时，事件将冒泡到 #parent 上，然后通过事件委托，jQuery将执行指定的回调函数。

为什么使用 $(document).on()？

使用 $(document).on() 方法可以在整个文档范围内绑定事件处理程序，而不仅仅是在元素初始加载时绑定。

这对于以下情况特别有用：

1. 动态添加/删除元素：如果你的页面上的元素是通过JavaScript动态添加或删除的，你可以使用 $(document).on() 来确保事件处理程序仍然有效。
2. 性能优化：绑定事件处理程序到 document 对象上可以减少事件处理程序数量，从而提高性能。

注意事项

• 虽然 $(document).on() 的灵活性很大，但也意味着事件将冒泡到文档层级，这可能导致性能问题。所以，尽量将事件委托到非常接近事件触发的元素上，以减少冒泡和处理的次数。
• 为了避免事件被多次触发，应尽量避免将 $(document).on() 用于高频率触发的事件类型，如 mousemove 或 scroll。

总结：

$(document).on() 是一个在JavaScript中使用jQuery库的便利方法，用于实现事件委托。它可用于动态添加元素或优化性能，提供了一种简单而有效的方式来处理事件。然而，在使用时需要小心注意性能问题和事件的冒泡。