有关DOM Event事件和自定义Event相关文档文章介绍速记

搞清Event.currentTarget、Event.target、Event.srcElement之间的关系

Event.currentTarget： https://developer.mozilla.org...

Event.target： https://developer.mozilla.org...

Event.srcElement： https://developer.mozilla.org...

• Event.currentTarget指的事件绑定时的DOM对象；
• Event.target指的事件发生所在的DOM对象，例如你的把事件可以绑在父元素上，点击子元素，此时Event.currentTarget指的是父元素，Event.target指的是你点击的子元素。
• Event.srcElement是一个非标准属性，是老IE对于Event.target的实现，指的事件发生所在的DOM对象。

---

自定义事件相关的API

快速了解如何自定义事件和触发的demo：https://developer.mozilla.org...

CustomEvent Constructor 用来创建自定义事件的API（标准推荐）：https://developer.mozilla.org...

document.createEvent()（老旧浏览器创建自定义事件API，已被废弃，不推荐，但可以作为兼容旧浏览器使用）：https://developer.mozilla.org...

如何利用document.createEvent()来实现CustomEvent Constructor 的兼容： https://github.com/tuxsudo/po...

IE8不支持document.createEvent()和CustomEvent Constructor，创建自定义可以利用 propertychange 类型事件
来兼容，张鑫旭老师在js-dom自定义事件一文中有介绍这种技巧，重点可以阅读【四、伪DOM自定义事件】一节： https://www.zhangxinxu.com/wo...

---

Comparison of Event Targets

https://developer.mozilla.org...

Property	Defined in	Purpose
event.target	DOM Event Interface	<p>The DOM element on the lefthand side of the call that triggered this event, eg:</p> <pre class="eval line-numbers language-html">element.dispatchEvent(event)<span class="line-numbers-rows" aria-hidden="true"><span></span></span></pre>
event.currentTarget	DOM Event Interface	The EventTarget whose EventListeners are currently being processed. As the event capturing and bubbling occurs this value changes.
event.relatedTarget	DOM MouseEvent Interface	Identifies a secondary target for the event.
event.explicitOriginalTarget	nsIDOMNSEvent.idl	<span title="This API has not been standardized."> </span> If the event was retargeted for some reason other than an anonymous boundary crossing, this will be set to the target before the retargeting occurs. For example, mouse events are retargeted to their parent node when they happen over text nodes (bug 185889), and in that case .target will show the parent and .explicitOriginalTarget will show the text node. Unlike .originalTarget, .explicitOriginalTarget will never contain anonymous content.
event.originalTarget	nsIDOMNSEvent.idl	<span title="This API has not been standardized."> </span> The original target of the event, before any retargetings. See Anonymous Content#Event_Flow_and_Targeting for details.

---

MouseEvent.relatedTarget

https://developer.mozilla.org...

The MouseEvent.relatedTarget read-only property is the secondary target for the event, if there is one. That is:

Event name	target	relatedTarget
focusin	The EventTarget receiving focus	The EventTarget losing focus
focusout	The EventTarget losing focus	The EventTarget receiving focus
mouseenter	The EventTarget the pointing device entered to	The EventTarget the pointing device exited from
mouseleave	The EventTarget the pointing device exited from	The EventTarget the pointing device entered to
mouseout	The EventTarget the pointing device exited from	The EventTarget the pointing device entered to
mouseover	The EventTarget the pointing device entered to	The EventTarget the pointing device exited from
dragenter	The EventTarget the pointing device entered to	The EventTarget the pointing device exited from
dragexit	The EventTarget the pointing device exited from	The EventTarget the pointing device entered to

关于MouseEvent.relatedTarget用法的演示： https://jsfiddle.net/uTe99

---

Interface Event

[Constructor(DOMString type, optional EventInit eventInitDict),

 Exposed=(Window,Worker,AudioWorklet)]

interface Event {

  readonly attribute DOMString type;

  readonly attribute EventTarget? target;

  readonly attribute EventTarget? srcElement; // historical

  readonly attribute EventTarget? currentTarget;

  sequence<EventTarget> composedPath();



  const unsigned short NONE = 0;

  const unsigned short CAPTURING_PHASE = 1;

  const unsigned short AT_TARGET = 2;

  const unsigned short BUBBLING_PHASE = 3;

  readonly attribute unsigned short eventPhase;



  void stopPropagation();

           attribute boolean cancelBubble; // historical alias of .stopPropagation

  void stopImmediatePropagation();



  readonly attribute boolean bubbles;

  readonly attribute boolean cancelable;

           attribute boolean returnValue; // historical

  void preventDefault();

  readonly attribute boolean defaultPrevented;

  readonly attribute boolean composed;



  [Unforgeable] readonly attribute boolean isTrusted;

  readonly attribute DOMHighResTimeStamp timeStamp;



  void initEvent(DOMString type, optional boolean bubbles = false, optional boolean cancelable = false); // historical

};



dictionary EventInit {

  boolean bubbles = false;

  boolean cancelable = false;

  boolean composed = false;

};

---