jquery delegate jQuery event.delegateTarget 属性

jquery delegate

jQuery 的 delegate() 方法允许开发者在一个元素上绑定事件处理函数，而不是在每个子元素上绑定。这样可以减少内存占用，提高性能。

delegate() 方法的语法如下：

$(selector).delegate(childSelector, eventType, handler);

其中，selector 是要委托的元素；childSelector 是要委托的子元素；eventType 是要委托的事件类型；handler 是事件处理函数。

例如，我们有一个 div 元素，里面有三个 a 元素。我们想要在这三个 a 元素上都添加 click 事件处理函数。我们可以使用 delegate() 方法来实现这一目标：

$('div').delegate('a', 'click', function(){  // do something });

当用户单击 div 中的 a 元素时，就会触发 click 事件处理函数。这样就不必在每个 a 元素上都添加 click 事件处理函数了。

此外，delegate() 还有一个重载版本：

$(selector).delegate(childSelector, eventType, data, handler); 

该版本和前面的版本基本相同，只是多了一个 data 参数。data 参数是一个对象，会作为参数传递到 handler 中去。handler 的语法如下所示:

(eventObject, data) { // do something } 

jQuery event.delegateTarget 属性

jQuery event.delegateTarget 属性

jQuery 事件方法

实例

改变 <div> 元素的背景颜色（<button> 元素的祖先）：

$("div").on("click","button",function(event){
$(event.delegateTarget).css("background-color", "pink");
});

---

定义和用法

event.delegateTarget 属性返回当前调用的 jQuery 事件处理程序所添加的元素。

该属性对于由 on() 方法添加的委托事件非常有用，事件处理程序是在元素的祖先被处理时添加的。

提示：如果事件直接绑定到元素且没有委托发生，则 event.delegateTarget 等同于 event.currentTarget（参见下面的实例）。

---

语法

event.delegateTarget

参数	描述
event	必需。event 参数来自事件绑定函数。

---

更多实例

delegateTarget 和带委托的 currentTarget 之间的不同
演示 delegateTarget 和当委托发生时的 currentTarget 之间的不同。

对于直接绑定事件，delegateTarget 和 currentTarget 是相等的
演示对于直接绑定事件，delegateTarget 和 currentTarget 是相等的。

---

jQuery 事件方法