jQuery事件.delegateTarget属性

jQuery事件对象中的delegateTarget属性指向实际触发事件的元素所在的父级元素。该属性只存在于事件处理函数中。接下来，我们将详细讲解delegateTarget属性。

基本语法

在事件处理函数中使用delegateTarget属性时，可以通过event.delegateTarget进行访问。该属性的值是一个jQuery对象，指向事件绑定时的选择器所匹配的元素。

用法举例

下面我们来看两个使用delegateTarget属性的实际例子。

示例一

HTML代码：

<ul id="list">
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

jQuery代码：

$("#list").on("click", "li", function(event) {
  console.log(event.delegateTarget);
});

以上代码中，我们使用了on方法绑定了click事件，并且事件选择器为li，意思是当li元素被点击时，会触发该事件。在事件处理函数中，我们输出了event.delegateTarget，也就是ul元素，以验证delegateTarget属性的输出结果。

示例二

HTML代码：

<div id="container">
  <ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
  </ul>
</div>

jQuery代码：

$("#container").on("click", "li", function(event) {
  console.log(event.delegateTarget);
});

以上代码中，我们使用了on方法绑定了click事件，并且事件选择器为li，意思是当li元素被点击时，会触发该事件。不同于示例一的是，这里ul元素包含在外层的div元素中。在事件处理函数中，我们输出了event.delegateTarget，也就是我们所期望的div#container元素，因为div#container是实际触发事件的元素所在的父级元素。

注意事项

需要注意的是，delegateTarget属性只在事件处理函数中有效，并且在事件冒泡过程中会发生变化。如果事件冒泡的过程中，又有新的事件处理函数被触发，那么delegateTarget属性的值也会相应地改变。如果需要在事件处理函数外访问delegateTarget属性的值，可以考虑将delegateTarget的值存为全局变量或者在事件处理函数内部进行传递。此外，delegateTarget属性在IE8以下的版本不能使用，建议在项目中使用之前先做兼容性的测试。