Jaka jest różnica między Event.target, Event.toElement i Event.srcElement?

88

Mam następujący kod:

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

Klikając prawym przyciskiem myszy na a <div class="foo"></div>, zwraca to:

div.foo, div.foo, div.foo

Klikając prawym przyciskiem myszy na a <input>, zwraca to:

wejście, wejście, wejście

Wszystko wydaje się przynosić ten sam skutek. Czy jest jakaś sytuacja, w której jeden z nich ma inne zastosowanie niż pozostałe?

Guilherme Nascimento
źródło

Odpowiedzi:

81

Celem zdarzenia jest element, do którego zdarzenie jest wysyłane:

Obiekt, do którego kierowane jest zdarzenie przy użyciu przepływu zdarzeń DOM . Celem zdarzenia jest wartość Event.target atrybutu.

srcElementto niestandardowy sposób uzyskiwania pliku target.

Obecny cel wydarzenie jest elementem, który ma detektor zdarzeń, który jest obecnie wywoływany:

W przepływie zdarzeń bieżącym celem zdarzenia jest obiekt powiązany z aktualnie wysyłaną procedurą obsługi zdarzenia . Ten obiekt MOŻE być samym celem zdarzenia lub jednym z jego przodków. Bieżący cel zdarzenia zmienia się, gdy zdarzenie jest propagowane z obiektu do obiektu przez różne fazy przepływu zdarzenia. Bieżący cel zdarzenia to wartość Event.currentTargetatrybutu.

Używanie thiswewnątrz detektora zdarzeń jest powszechnym (i standardowym) sposobem uzyskiwania bieżącego celu zdarzenia.

Niektóre wydarzenia mają relatedTarget:

Służy do identyfikowania pomocniczego EventTargetzwiązanego ze zdarzeniem interfejsu użytkownika, w zależności od typu zdarzenia.

fromElementi toElementsą niestandardowymi sposobami uzyskiwania pliku relatedTarget.

Oriol
źródło
7
Używam „toElement” w Chrome w wersji 60 - czy na pewno jest to „niestandardowy sposób IE”?
PandaWood
2
MSDN twierdzi, że jest to „niestandardowe” i „nie używaj go w witrynach produkcyjnych skierowanych do sieci”: developer.mozilla.org/en-US/docs/Web/API/Event/srcElement
TetraDev,
najnowszy chrome obsługuje „toElement”, ale nie obsługuje przeglądarki Mozilla Firefox. Musiałem użyć właściwości „target”, aby obsłużyć kilka przypadków w Mozilli.
Vishal,