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

};

複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。