一句话区分currentTarget和target

currentTarget：事件处理程序注册的元素，
target：事件的实际目标元素

下面是2个不同的场景例子：

场景1：事件处理程序注册的元素 === 事件的实际目标元素

<div id="div">
    <button id='ele'>按钮</button>
</div>

var ele = document.getElementById('ele');
ele.onclick = function(e){
    console.log(e.target == this);  //true
    console.log(e.currentTarget == this);  //true
}

在事件处理程序内部，对象this始终等于currentTarget ，而target则只包含事件的实际目标。

事件处理程序注册的元素和事件的实际目标元素都是button，所以e.currentTarget == e.target == this

场景2：事件处理程序注册的元素 != 事件的实际目标元素

<div id="div">
    <button id='ele'>按钮</button>
</div>


var ele = document.getElementById('ele');
var div = document.getElementById('div');

//当点击页面的按钮时
div.onclick = function(e){
    console.log(e.currentTarget == this);  //true
    console.log(this == div);  //true
    console.log(e.target == ele);  //true
}

当点击页面的按钮时，this 和currentTarget 都等于div，因为事件处理程序是注册在这个元素上的；而target 等于ele，因为ele才是click事件的真正目标。

由于按钮上并没有注册事件处理程序，结果click事件冒泡到了div上，在那里事件才得到处理。

注意：使用attachEvent和detachEvent注册事件时，事件处理程序会在全局作用域中运行，此时this == window

一句话区分currentTarget和target

猜你喜欢