Quelle est la différence entre Event.target, Event.toElement et Event.srcElement?

87

J'ai le code suivant:

document.oncontextmenu = function(evt) {
    evt = evt || window.event;
    console.log(evt.target, evt.toElement, evt.srcElement);
};

En cliquant sur le bouton droit de la souris sur a <div class="foo"></div>, renvoie ceci:

div.foo, div.foo, div.foo

En cliquant sur le bouton droit de la souris sur a <input>, renvoie ceci:

entrée, entrée, entrée

Tous semblent apporter le même résultat. Y a-t-il une situation où l'un d'eux a une utilisation différente des autres?

Guilherme Nascimento
la source

Réponses:

78

La cible de l'événement est l'élément auquel l'événement est distribué:

Objet vers lequel un événement est ciblé à l'aide du flux d'événements DOM . La cible de l'événement est la valeur de l' Event.target attribut.

srcElementest un moyen non standard d'IE pour obtenir le fichier target.

La cible d'événement actuelle est l'élément qui a l'écouteur d'événement qui est actuellement appelé:

Dans un flux d'événements, la cible de l'événement en cours est l'objet associé au gestionnaire d'événements en cours de distribution. Cet objet PEUT être la cible de l' événement lui-même ou l'un de ses ancêtres. La cible de l'événement actuel change à mesure que l' événement se propage d'un objet à l'autre à travers les différentes phases du flux d'événements. La cible d'événement actuelle est la valeur de l' Event.currentTargetattribut.

L'utilisation à l' thisintérieur d'un écouteur d'événement est un moyen courant (et standard) d'obtenir la cible d'événement actuelle.

Certains événements aimables ont un relatedTarget:

Utilisé pour identifier un secondaire EventTargetlié à un événement d'interface utilisateur, en fonction du type d'événement.

fromElementet toElementsont des moyens non standard d'IE pour obtenir le fichier relatedTarget.

Oriol
la source
7
J'utilise "toElement" dans la version 60 de Chrome - êtes-vous sûr que c'est un "moyen non standard d'IE"?
PandaWood
2
MSDN dit qu'il est "non standard" et "ne l'utilisez pas sur les sites de production faisant face au Web": developer.mozilla.org/en-US/docs/Web/API/Event/srcElement
TetraDev
le dernier chrome prend en charge "toElement" mais pas Mozilla Firefox. J'ai dû utiliser la propriété 'target' pour prendre en charge quelques cas dans Mozilla.
Vishal