В чем разница между Event.target, Event.toElement и Event.srcElement?

У меня есть следующий код:

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

Нажав правую кнопку мыши на <div class="foo"></div>, верните это:

div.foo, div.foo, div.foo

Нажав правую кнопку мыши на <input>, верните это:

вход, вход, вход

Все, кажется, приносят тот же результат. Есть ли ситуация, когда одна из них имеет другое применение, чем другие?

Ответы

Ответ 1

Объект события - это элемент, которому отправлено событие:

Объект, к которому привязан event, используя DOM мероприятие поток. Цель события - значение Event.targetатрибут.

srcElement является нестандартным способом IE для получения target.

текущий целевой объект - это элемент, в котором в данный момент вызывается прослушиватель событий:

В потоке событий текущая цель события связана с объектом с обработчиком событий , который в настоящее время отправляется. Эта объект МОЖЕТ быть цель события сама или один из ее предков. Текущая цель события изменяется, поскольку event распространяется от объект для объекта через различные фазы потока событий. Целью текущего события является значение Event.currentTarget.

Использование this внутри прослушивателя событий является обычным (и стандартным) способом получения текущей цели события.

В некоторых событиях есть relatedTarget:

Используется для идентификации вторичного EventTarget, связанного с событием пользовательского интерфейса, в зависимости от типа события.

fromElement и toElement являются нестандартными способами IE для получения relatedTarget.