Event 接口的只读属性 currentTarget 表示的,标识是当事件沿着 DOM 触发时事件的当前目标。它总是指向事件绑定的元素,而 Event.target 则是事件触发的元素。
event.currentTarget
Syntax
var currentEventTarget = event.currentTarget;
Value
EventTarget
例子
当将相同的事件处理程序附加到多个元素时 event.currentTarget 就很有用。
function hide(e){
e.currentTarget.style.visibility = "hidden";
console.log(e.currentTarget);
// 该函数用作事件处理器时: this === e.currentTarget
}
var ps = document.getElementsByTagName('p');
for(var i = 0; i < ps.length; i++){
// console: 打印被点击的p元素
ps[i].addEventListener('click', hide, false);
}
// console: 打印body元素
document.body.addEventListener('click', hide, false);
Event.target
触发事件的对象 (某个DOM元素) 的引用。当事件处理程序在事件的冒泡或捕获阶段被调用时,它与event.currentTarget不同。
语法
let theTarget = event.target
示例
event.target 属性可以用来实现事件委托 (event delegation)。
// Make a list
var ul = document.createElement('ul');
document.body.appendChild(ul);
var li1 = document.createElement('li');
var li2 = document.createElement('li');
ul.appendChild(li1);
ul.appendChild(li2);
function hide(e){
// e.target 引用着 <li> 元素
// 不像 e.currentTarget 引用着其父级的 <ul> 元素.
e.target.style.visibility = 'hidden';
}
// 添加监听事件到列表,当每个 <li> 被点击的时候都会触发。
ul.addEventListener('click', hide, false);
在 IE6-8 中,事件模型与标准不同。使用非标准的 element.attachEvent() 方法绑定事件监听器。在该模型中,事件对象有一个 srcElement 属性,等价于target 属性。
function hide(e) {
// 支持 IE6-8
var target = e.target || e.srcElement;
target.style.visibility = 'hidden';
}