jq中的事件委托: closest parent parents delegate

jQuery是一种流行的JavaScript库，简化了处理HTML文档、处理元素的方法和事件，其中事件委托是一个非常重要的概念。事件委托可以提高代码的性能，减少内存消耗，同时还可以处理动态创建的元素。jQuery提供了closest、parent、parents、delegate等函数，用于实现事件委托。

closest方法

closest方法用于从元素自身开始，在DOM树中向上遍历，直到找到第一个匹配选择器的元素为止。closest方法接收一个选择器，返回一个jQuery对象。最常见的用法是在事件委托中，用来查找触发事件的目标元素。例如：

$(document).on('click', '.btn', function() {
  var $closestLi = $(this).closest('li');
  $closestLi.addClass('active');
});

上面的代码中，点击.btn元素时，会找到最近的li元素并添加active类。

parent和parents方法

parent方法和parents方法与closest方法类似，都是查找父级元素。parent方法只查找直接父级元素，而parents方法可以查找所有父级元素。它们都接收一个选择器参数：

$(document).on('click', '.child', function() {
  var $parent = $(this).parent('.parent');
  var $parents = $(this).parents('.parent');
  $parent.addClass('active');
  $parents.addClass('active');
});

上面的代码中，点击.child元素时，找到它的父级元素和所有父级元素，并添加active类。

delegate方法

最后是delegate方法，它用于为一个父级元素代理子级元素的事件处理，它不会立即处理事件，而是将事件委托给父级元素。delegate方法接收两个参数，第一个参数为选择器，第二个参数为事件处理函数。例如：

$(document).delegate('.child', 'click', function() {
  var $parent = $(this).parent('.parent');
  $parent.addClass('active');
});

上面的代码中，给document元素绑定了一个事件委托，它将处理所有.child元素的点击事件，并在找到它的父级元素后添加active类。

总之，jq中的事件委托通过选择器查找父级元素可以提高代码性能和可读性，closest方法可以帮助查找最近的元素，而parent和parents方法可以查找父级元素。最后，delegate方法用于代理子级元素的事件处理。使用这些方法可以帮助你编写更加优秀的代码。