有關DOM Event事件和自定義Event相關文檔文章介紹速記

callmewhy 發(fā)布于2019-08-23 13:41 / 2447人閱讀

摘要：搞清之間的關系指的事件綁定時的對象指的事件發(fā)生所在的對象，例如你的把事件可以綁在父元素上，點擊子元素，此時指的是父元素，指的是你點擊的子元素。是一個非標準屬性，是老對于的實現(xiàn)，指的事件發(fā)生所在的對象。

搞清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指的事件發(fā)生所在的DOM對象，例如你的把事件可以綁在父元素上，點擊子元素，此時Event.currentTarget指的是父元素，Event.target指的是你點擊的子元素。

Event.srcElement是一個非標準屬性，是老IE對于Event.target的實現(xiàn)，指的事件發(fā)生所在的DOM對象。

自定義事件相關的API

快速了解如何自定義事件和觸發(fā)的demo：https://developer.mozilla.org...

CustomEvent Constructor 用來創(chuàng)建自定義事件的API（標準推薦）：https://developer.mozilla.org...

document.createEvent()（老舊瀏覽器創(chuàng)建自定義事件API，已被廢棄，不推薦，但可以作為兼容舊瀏覽器使用）：https://developer.mozilla.org...

如何利用document.createEvent()來實現(xiàn)CustomEvent Constructor 的兼容： https://github.com/tuxsudo/po...

IE8不支持document.createEvent()和CustomEvent Constructor，創(chuàng)建自定義可以利用 propertychange 類型事件
來兼容，張鑫旭老師在js-dom自定義事件一文中有介紹這種技巧，重點可以閱讀【四、偽DOM自定義事件】一節(jié)： https://www.zhangxinxu.com/wo...

Comparison of Event Targets

https://developer.mozilla.org...

Property	Defined in	Purpose
event.target	DOM Event Interface	The DOM element on the lefthand side of the call that triggered this event, eg: `element.dispatchEvent(event)`
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

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

};

云服務器 GPU云服務器 event事件 js Event? Event event log

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/99395.html

【重溫基礎】20.事件

摘要：本文是重溫基礎系列文章的第二十篇。事件捕獲為截獲事件提供機會，然后實際的目標接收到事件，最后事件冒泡，對事件作出響應。事件處理事件處理，即響應某個事件。包括導致事件的元素事件類型等其他信息。本文是重溫基礎系列文章的第二十篇。這是第三個基礎系列的第一篇，歡迎持續(xù)關注呀！重溫基礎系列的【初級】和【中級】的文章，已經(jīng)統(tǒng)一整理到我的【Cute-JavaScript】的Java...

Blackjun 2019-08-26 13:28 評論0 收藏0
impress.js 源碼分析

摘要：從源碼的起就是主函數(shù)和大，主函數(shù)我們可以再看它先引入然后調(diào)用這個函數(shù)那么我們接下來重點來研究這個函數(shù)初始值第一步我們簡歷來支持手機設備是一個函數(shù)，本人覺得就是借鑒了的源碼。前言之前做簡歷用到了impress.js，就像網(wǎng)頁版的preiz，簡直酷炫！貼上我的簡歷地址：可是沒想到昨天師兄內(nèi)推我說需要看懂impress.js源碼，這樣才能體現(xiàn)你學習鉆研的精神。orz。。真是挖個坑坑把自...

ThinkSNS 2019-08-21 10:36 評論0 收藏0
DOM 事件詳解

摘要：與此同時，我們獲得了回調(diào)函數(shù)的句柄，從而可以隨時從元素上移除相應的事件監(jiān)聽。對象會被作為第一個參數(shù)傳遞給事件監(jiān)聽的回調(diào)函數(shù)。 Click、touch、load、drag、change、input、error、risize — 這些都是冗長的DOM（文檔對象模型）事件列表的一部分。事件可以在文檔(Document)結(jié)構的任何部分被觸發(fā)，觸發(fā)者可以是用戶操作，也可以是瀏覽器本身。事件并不是...

tianhang 2019-08-19 14:24 評論0 收藏0
瀏覽器內(nèi)核之 HTML 解釋器和 DOM 模型

摘要：書接上文瀏覽器內(nèi)核之資源加載與網(wǎng)絡棧本文介紹的模型之后，深入的核心部分，剖析的解釋器是如何將從網(wǎng)絡或者本地文件獲取的字節(jié)流轉(zhuǎn)成內(nèi)部表示的結(jié)構樹。事件處理最重要就是事件捕獲和事件冒泡這兩種機制。 showImg(https://segmentfault.com/img/remote/1460000016215814); 微信公眾號：愛寫bugger的阿拉斯加如有問題或建議，請后臺留言，我...

Carbs 2019-08-02 16:04 評論0 收藏0
《JavaScript 闖關記》之事件

摘要：事件捕獲團隊提出的另一種事件流叫做事件捕獲。所有節(jié)點中都包含這兩個方法，并且它們都接受個參數(shù)要處理的事件名作為事件處理程序的函數(shù)和一個布爾值。最后這個布爾值參數(shù)如果是，表示在捕獲階段調(diào)用事件處理程序如果是，表示在冒泡階段調(diào)用事件處理程序。 JavaScript 程序采用了異步事件驅(qū)動編程模型。在這種程序設計風格下，當文檔、瀏覽器、元素或與之相關的對象發(fā)生某些有趣的事情時，Web 瀏覽器...

ConardLi 2019-08-22 10:44 評論0 收藏0