jquery on做事件委托

原创

mob649e8157ebce 2023-08-20 10:48:05 ©著作权

文章标签 事件委托事件处理 jQuery 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob649e8157ebce的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery on事件委托

在编写JavaScript代码时，经常会涉及到处理DOM元素的事件。然而，当页面中存在大量的DOM元素时，直接为每个元素添加事件处理程序可能会导致性能问题。为了解决这个问题，jQuery提供了on方法，它可以用于事件委托。

什么是事件委托？

事件委托是一种常用的JavaScript编程技术，它允许我们在父元素上添加事件处理程序，以处理子元素上的事件。简单来说，事件委托利用了事件冒泡的机制，在父元素上捕获子元素的事件。

jQuery on方法

jQuery的on方法是用于为元素添加事件处理程序的。它的语法如下：

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

参数说明：

selector：要绑定事件的元素选择器。
event：要绑定的事件类型，比如click、mouseover等。
childSelector：要委托事件的子元素选择器。
data：可选参数，传递给事件处理程序的数据。
handler：事件处理程序函数。

事件委托的优势

使用事件委托有以下几个优势：

动态元素

当页面中的元素是通过异步加载或动态生成的时候，直接为元素添加事件处理程序可能会导致事件无法绑定。而采用事件委托的方式，可以在父元素上绑定事件处理程序，无论子元素何时被添加到页面上，都可以正常触发事件。

减少事件处理程序数量

当页面中存在大量的相似元素时，为每个元素都添加事件处理程序会导致代码冗余。而事件委托可以将事件处理程序添加到父元素上，减少了代码量。

性能优化

当页面中有大量元素时，为每个元素都添加事件处理程序会占用大量内存。而事件委托只需要在父元素上添加一个事件处理程序，不会占用过多的内存。

示例

假设我们有一个HTML页面，其中包含了一个列表，列表中的每个项目都有一个按钮。我们希望在点击按钮时，控制台输出按钮所属列表项的索引。

HTML代码如下：

<ul id="list">
  <li>Item 1 <button class="btn">Button</button></li>
  <li>Item 2 <button class="btn">Button</button></li>
  <li>Item 3 <button class="btn">Button</button></li>
  <li>Item 4 <button class="btn">Button</button></li>
  <li>Item 5 <button class="btn">Button</button></li>
</ul>

我们可以使用以下代码来实现事件委托：

$('#list').on('click', '.btn', function() {
  var index = $(this).closest('li').index();
  console.log('Button index: ' + index);
});

在上面的代码中，我们通过$('#list')选择了包含所有列表项的父元素。然后使用.on('click', '.btn', function() {})为父元素添加了一个事件处理程序，监听所有按钮的点击事件。当按钮被点击时，事件处理程序将调用closest('li')方法找到最近的li元素，并使用.index()方法获取其在列表中的索引。最后将索引值输出到控制台。