搞清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;

};