Event.target

C'est une référence à l'objet qui a envoyé l'événement. C'est une propriété différente de event.currentTarget lorsque le gestionnaire d'événements est appelé au cours de la phase de propagation ou de la phase de capture de l'événement.

Syntaxe

laCible = event.target

Exemple

La propriété event.target peut être utilisée pour implémenter la délégation d'événements.

// Produit une liste
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 se réfère à l'élément <li> cliqué
  // C'est différent de e.currentTarget qui doit faire référence au parent <ul> dans ce contexte
  e.target.style.visibility = 'hidden';
}

// Attache l'écouteur à la liste
// Il se déclenche pour chaque <li> clické
ul.addEventListener('click', hide, false);

Spécifications

Spécification Statut Commentaire
DOM
La définition de 'Event.target' dans cette spécification.
Standard évolutif  
DOM4
La définition de 'Event.target' dans cette spécification.
Obsolete  
Document Object Model (DOM) Level 2 Events Specification
La définition de 'Event.target' dans cette spécification.
Obsolete Définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
targetChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 9Opera Support complet 7Safari Support complet 1WebView Android Support complet 1Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet 10.1Safari iOS Support complet 1Samsung Internet Android Support complet 1.0

Légende

Support complet  
Support complet

Notes concernant la compatibilité

Sur IE6-8, le modèle d'événement est différent. Les écouteurs sont attachés avec la méthode non standard EventTarget.attachEvent . Dans ce modèle, l'objet événement a une propriété  Event.srcElement, à la place de la propriété target, avec la même sémantique que event.target.

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

Voir aussi

Comparaison des cibles d'évènements