指向最初觸發事件的 DOM 物件。與 event.currentTarget
屬性不同的是,event.currentTarget
屬性總會指向目前於冒泡或捕捉階段正在處理該事件之事件處理器所註冊的 DOM 物件,而 event.target
屬性則是永遠指向觸發事件的 DOM 物件。
語法
theTarget = event.target
範例
The event.target
property can be used in order to implement 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);
規範
Specification | Status | Comment |
---|---|---|
DOM The definition of 'Event.target' in that specification. |
Living Standard | |
DOM4 The definition of 'Event.target' in that specification. |
Obsolete | |
Document Object Model (DOM) Level 2 Events Specification The definition of 'Event.target' in that specification. |
Obsolete | Initial definition |
瀏覽器相容性
We're converting our compatibility data into a machine-readable JSON format.
This compatibility table still uses the old format,
because we haven't yet converted the data it contains.
Find out how you can help!
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
Compatibility notes
On IE 6-8 the event model is different. Event listeners are attached with the non-standard EventTarget.attachEvent
method. In this model, the event object has a Event.srcElement
property, instead of the target
property, and it has the same semantics as event.target
.
function hide(e) {
// Support IE6-8
var target = e.target || e.srcElement;
target.style.visibility = 'hidden';
}