一个触发事件的对象的引用。它与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 refers to the clicked <li> element
  // This is different than e.currentTarget which would refer to the parent <ul> in this context
  e.target.style.visibility = 'hidden';
}

// Attach the listener to the list
// It will fire when each <li> is clicked
ul.addEventListener('click', hide, false);

event.target 属性在实现事件代理时会被用到。

// 假定一个 list 变量为 ul 元素
function hide(e) {
  // 点击列表项目(li)区域,e.target 与 e.currentTarget 不同
  e.target.style.visibility = 'hidden';
}

list.addEventListener('click', hide, false);

// If some element (<li> element or a link within an <li> element for instance) is clicked, it will disappear.
// It only requires a single listener to do that

浏览器兼容性

在 IE6-8 中,事件模型与标准不同。使用非标准的 element.attachEvent() 方法绑定事件监听器。在该模型中,事件对象有一个 srcElement 属性,等价于target 属性。

function hide(e) {
  // 支持 IE6-8
  var target = e.target || e.srcElement;
  target.style.visibility = 'hidden';
}

规范

DOM Level 2 Events: Event.target

相关链接

文档标签和贡献者

 此页面的贡献者: zhuangyin, xgqfrms-GitHub, yuduxyz, collhector, AlexChao
 最后编辑者: zhuangyin,