Event.target,Event.toElement和Event.srcElement有什么区别?


87

我有以下代码:

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>,可返回以下内容:

输入输入输入

所有人似乎都带来相同的结果。是否存在其中一种用途与其他用途不同的情况?

Answers:


78

活动的目标是到该事件被分派的元素:

使用DOM事件流事件作为目标的对象。事件目标是 属性的值。Event.target

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

当前事件的目标是具有当前正在调用的事件侦听器的元件:

在事件流中,当前事件目标是与当前正在分派的事件处理程序关联的对象。这个对象可以是事件目标本身或其祖先之一。当前事件目标随着事件在事件流的各个阶段之间从一个对象传播到另一个对象而改变。当前事件目标是Event.currentTarget属性的值 。

this在事件侦听器内部使用是获取当前事件目标的常用(和标准)方法。

某些事件具有relatedTarget

用于识别EventTarget与UI事件相关的辅助事件,具体取决于事件的类型。

fromElement并且toElement是IE的非标准方法relatedTarget


7
我在Chrome 60版中使用“ toElement”-您确定这是“ IE非标准方式”吗?
PandaWood '17

2
MSDN说它是“非标准的”,“不要在面向Web的生产站点上使用它”:developer.mozilla.org/en-US/docs/Web/API/Event/srcElement
TetraDev

最新的Chrome支持“ toElement”,但不支持Mozilla Firefox。我不得不使用'target'属性来支持Mozilla中的一些情况。
维沙尔'18
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.