e.target, e.currentTarget, e.relatedTarget, e.delegateTarget and this

[LeoYuan]

本文旨在理清jQuery在事件绑定的回调函数中各个target的区别，demo可点击(target演示). 一共有5个，即

• this
• target
• currentTarget
• relatedTarget
• delegateTarget

假设有如下事件绑定代码

// on
$('#wrapper1').on('click', '#div1', function(e) {
    record('on click', this, e.target, e.currentTarget, e.relatedTarget, e.delegateTarget);
});
// delegate
$('#wrapper1').delegate('#div1', 'click', function(e) {
    record('delegate click', this, e.target, e.currentTarget, e.relatedTarget, e.delegateTarget);
});
// direct binding
$('#wrapper1').click(function(e) {
    record('direct binding', this, e.target, e.currentTarget, e.relatedTarget, e.delegateTarget);
});

this

this是最常用的指向被绑定节点的变量，以上this变量指向#div1和#wrapper1。

currentTarget

currentTarget在绝大多数情况都等于this（sorry，例外情况目前还没找到）。

target

target永远指向的是最初触发事件的节点，跟绑定事件的节点以及代理绑定的节点都无关。以上几种绑定方式的target都为#div1内部的某个节点。

relatedTarget

在mouseover和mouseout时有用，其表示的意思是相关的target，即mouseover时是从哪个节点进入的，mouseout时是去哪个节点。 注：

1. mouseover和mouseout著名的bug，即进入mouseover元素的节点，会触发一次mouseout事件和一次mouseover事件，这时就会出现mouseout到里层节点（e.relatedTarget = 里层节点），紧接着mouseover到当前节点（e.relatedTarget = 当前节点），即出现了从自己mouseover到自己的bug。
2. 使用mouseenter和mouseleave可解决这个bug。

delegateTarget

顾名思义，即代理事件绑定的节点，需要注意的是，在直接绑定的场景中，delegateTarget也被赋值成绑定节点，如以上场景的e.delegateTarget都等于#wrapper1.