有关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...

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:

关于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;

};