一个触发事件的对象的引用。它与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

规范

Specification Status Comment
DOM
Event.target
Living Standard  
DOM4
Event.target
Obsolete  
Document Object Model (DOM) Level 2 Events Specification
Event.target
Obsolete Initial definition

浏览器兼容性

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support Yes Yes Yes Yes Yes Yes
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support Yes Yes Yes Yes Yes Yes ?

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

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

相关链接

文档标签和贡献者

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