Event.target、Event.toElement 和 Event.srcElement 有啥区别？

Posted 2023-02-19

【中文标题】Event.target、Event.toElement 和 Event.srcElement 有啥区别？

【英文标题】：What is the difference between Event.target, Event.toElement and Event.srcElement?Event.target、Event.toElement 和 Event.srcElement 有什么区别？

【发布时间】：2015-10-30 04:07:09

【问题描述】：

我有以下代码：

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 target 是事件被调度到的元素：

使用DOM event flow 将event 定位到的对象。事件目标是Event.target 的值 属性。

srcElement是IE获取target的非标准方式。

current event target 是具有当前调用的事件侦听器的元素：

在事件流中，当前事件目标是关联的对象 与当前正在发送的event handler。这 对象可能是event target 本身或其祖先之一。 当前事件目标随着event 的传播而改变 通过事件流的各种phases 对象到对象。 当前事件目标是 Event.currentTarget 属性。

在事件侦听器中使用this 是获取当前事件目标的常用（和标准）方式。

有些事件有relatedTarget:

用于标识与 UI 事件相关的辅助EventTarget， 取决于事件的类型。

fromElement和toElement是IE获取relatedTarget的非标准方式。

【讨论】：

我在 Chrome 60 版中使用“toElement” - 你确定这是“IE 非标准方式”吗？

MSDN 说它是“非标准的”并且“不要在面向网络的生产站点上使用它”：developer.mozilla.org/en-US/docs/Web/API/Event/srcElement

最新的 chrome 支持 "toElement" 但不支持 Mozilla Firefox。我不得不使用 'target' 属性来支持 Mozilla 中的一些案例。