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

};

阅读 1.8k

而井前端修仙传
而井前端修仙传
829 声望
1.8k 粉丝
0 条评论
829 声望
1.8k 粉丝
文章目录
宣传栏