成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

有關(guān)DOM Event事件和自定義Event相關(guān)文檔文章介紹速記

callmewhy / 2423人閱讀

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

搞清Event.currentTarget、Event.target、Event.srcElement之間的關(guān)系

Event.currentTarget： https://developer.mozilla.org...

Event.target： https://developer.mozilla.org...

Event.srcElement： https://developer.mozilla.org...

Event.currentTarget指的事件綁定時(shí)的DOM對象；

Event.target指的事件發(fā)生所在的DOM對象，例如你的把事件可以綁在父元素上，點(diǎn)擊子元素，此時(shí)Event.currentTarget指的是父元素，Event.target指的是你點(diǎn)擊的子元素。

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

自定義事件相關(guān)的API

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

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

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

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

IE8不支持document.createEvent()和CustomEvent Constructor，創(chuàng)建自定義可以利用 propertychange 類型事件
來兼容，張鑫旭老師在js-dom自定義事件一文中有介紹這種技巧，重點(diǎn)可以閱讀【四、偽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

關(guān)于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;

};

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

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

相關(guān)文章

  • 【重溫基礎(chǔ)】20.事件

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

    Blackjun 評論0 收藏0

  • impress.js 源碼分析

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

    ThinkSNS 評論0 收藏0

  • DOM 事件詳解

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

    tianhang 評論0 收藏0

  • 瀏覽器內(nèi)核之 HTML 解釋器和 DOM 模型

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

    Carbs 評論0 收藏0

  • 《JavaScript 闖關(guān)記》之事件

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

    ConardLi 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<