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

时间 2019-11-17

标签有关 dom event 事件自定义相关文档文章介绍速记栏目 HTML 繁體版

原文原文链接

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

Event.currentTarget： developer.mozilla.org/en-US/docs/…html

Event.target： developer.mozilla.org/en-US/docs/…node

Event.srcElement： developer.mozilla.org/en-US/docs/…git

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

自定义事件相关的API

快速了解如何自定义事件和触发的demo：developer.mozilla.org/en-US/docs/…github

CustomEvent Constructor 用来建立自定义事件的API（标准推荐）：developer.mozilla.org/en-US/docs/…浏览器

document.createEvent()（老旧浏览器建立自定义事件API，已被废弃，不推荐，但能够做为兼容旧浏览器使用）：developer.mozilla.org/en-US/docs/…app

如何利用document.createEvent()来实现CustomEvent Constructor 的兼容： github.com/tuxsudo/pol…dom

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

Comparison of Event Targets

developer.mozilla.org/en-US/docs/…wordpress

Property	Defined in	Purpose
event.target	DOM Event Interface	The DOM element on the lefthand side of the call that triggered this event, eg:ui <pre class="eval line-numbers language-html"><code class=" language-html">element.dispatchEvent(event)<span class="line-numbers-rows" aria-hidden="true"><span></span></span></code></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	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	The original target of the event, before any retargetings. See Anonymous Content#Event_Flow_and_Targeting for details.

MouseEvent.relatedTarget

developer.mozilla.org/en-US/docs/…

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用法的演示： 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;

};

复制代码