国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

對(duì)javascript事件的深度理解

zxhaaa / 354人閱讀

摘要：事件流事件流是描述對(duì)頁(yè)面接受事件的順序，和提出了完全相反的事件流模型，描述的是從頁(yè)面中接收事件的順序也可理解為事件在頁(yè)面中傳播的順序。

事件流

事件流是描述對(duì)頁(yè)面接受事件的順序，IE和Netscape提出了完全相反的事件流模型，描述的是從頁(yè)面中接收事件的順序,也可理解為事件在頁(yè)面中傳播的順序。

我們通過(guò)平常使用知道addEventListener最后的參數(shù)是切換句柄的，當(dāng)這個(gè)布爾值為true時(shí)，表示在捕獲階段調(diào)用事件處理程序；若果是false，表示在冒泡階段調(diào)用事件處理程序。 

MDN：useCapture  可選（）
Boolean，是指在DOM樹中，注冊(cè)了該listener的元素，是否會(huì)先于它下方的任何事件目標(biāo)，接收到該事件。沿著DOM樹向上冒泡的事件不會(huì)觸發(fā)被指定為use capture（也就是設(shè)為true）的listener。當(dāng)一個(gè)元素嵌套了另一個(gè)元素，兩個(gè)元素都對(duì)同一個(gè)事件注冊(cè)了一個(gè)處理函數(shù)時(shí)，所發(fā)生的事件冒泡和事件捕獲是兩種不同的事件傳播方式。事件傳播模式?jīng)Q定了元素以哪個(gè)順序接收事件。


Once the propagation path has been determined, the event object passes through one or more event phases. There are three event phases: capture phase, target phase and bubble phase. Event objects complete these phases as described below. A phase will be skipped if it is not supported, or if the event object’s propagation has been stopped. For example, if the bubbles attribute is set to false, the bubble phase will be skipped, and if stopPropagation() has been called prior to the dispatch, all phases will be skipped.


The capture phase: The event object propagates through the target’s ancestors from the Window to the target’s parent. This phase is also known as the capturing phase.


The target phase: The event object arrives at the event object’s event target. This phase is also known as the at-target phase. If the event type indicates that the event doesn’t bubble, then the event object will halt after completion of this phase.


The bubble phase: The event object propagates through the target’s ancestors in reverse order, starting with the target’s parent and ending with the Window. This phase is also known as the bubbling phase.
為什么要使用 addEventListener?

addEventListener 是 W3C DOM 規(guī)范中提供的注冊(cè)事件監(jiān)聽(tīng)器的方法。它的優(yōu)點(diǎn)包括：

它允許給一個(gè)事件注冊(cè)多個(gè) listener。當(dāng)存在其他的庫(kù)時(shí)，使用 DHTML 庫(kù)或者 Mozilla extensions 不會(huì)出現(xiàn)問(wèn)題。

它提供了一種更精細(xì)的手段控制 listener 的觸發(fā)階段。（即可以選擇捕獲或者冒泡）。

它對(duì)任何 DOM 元素都是有效的，而不僅僅只對(duì) HTML 元素有效。

事件冒泡

IE的事件流叫事件冒泡，逐級(jí)向上傳播

點(diǎn)擊div之后，順序是div -> body -> html

事件捕獲

Netscape事件捕獲是與冒泡相反的

DOM事件流

DOM規(guī)定的事件流包括三個(gè)階段

捕獲階段

目標(biāo)階段

冒泡階段

事件捕獲階段，為截獲事件提供機(jī)會(huì)，然后是實(shí)際的目標(biāo)接受事件，最后是事件冒泡階段




  
  
  
  Document
事件的作用范圍

事件的作用范圍為:
元素自己所占頁(yè)面空間部分加嵌套元素所占空間范圍(若嵌套元素覆蓋在容器元素上，則事件的作用范圍為容器元素自身所占空間大小)

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/84731.html

相關(guān)文章

  • JavasScript重難點(diǎn)知識(shí)

    摘要：忍者級(jí)別的函數(shù)操作對(duì)于什么是匿名函數(shù)，這里就不做過(guò)多介紹了。我們需要知道的是，對(duì)于而言，匿名函數(shù)是一個(gè)很重要且具有邏輯性的特性。通常，匿名函數(shù)的使用情況是創(chuàng)建一個(gè)供以后使用的函數(shù)。 JS 中的遞歸 遞歸, 遞歸基礎(chǔ), 斐波那契數(shù)列, 使用遞歸方式深拷貝, 自定義事件添加 這一次，徹底弄懂 JavaScript 執(zhí)行機(jī)制 本文的目的就是要保證你徹底弄懂javascript的執(zhí)行機(jī)制，如果...

    forsigner 評(píng)論0 收藏0

  • TypeScript VS JavaScript 深度對(duì)比

    摘要：是事件驅(qū)動(dòng)的，只根據(jù)用戶的操作做出相應(yīng)的反應(yīng)處理。中的數(shù)據(jù)要求帶有明確的類型，不要求。這些小小的變化可能會(huì)產(chǎn)生嚴(yán)重的意想不到的后果，因此有必要撤銷這些變化。的優(yōu)勢(shì)相比于，也有一些明顯優(yōu)勢(shì)。因此在應(yīng)對(duì)大型開(kāi)發(fā)項(xiàng)目時(shí)，使用更加合適。 showImg(https://segmentfault.com/img/bV1Dx7?w=740&h=322); TypeScript 和 JavaScri...

    William_Sang 評(píng)論0 收藏0

  • 前端每周清單第 56 期: D3 5.0，深入 React 事件系統(tǒng)，SketchCode 界面生成

    摘要：雅虎從很早就開(kāi)始招聘和培養(yǎng)研究型人才，雅虎研究院就是在這個(gè)過(guò)程中應(yīng)運(yùn)而生的。今天我就來(lái)說(shuō)一說(shuō)雅虎研究院的歷史，以及過(guò)去十多年間取得的成就，聊一聊如何通過(guò)引進(jìn)高級(jí)人才，迅速構(gòu)建起一支世界級(jí)的研發(fā)團(tuán)隊(duì)。 showImg(https://segmentfault.com/img/remote/1460000013995512); 作者：王下邀月熊 編輯：徐川 前端每周清單專注大前端領(lǐng)域內(nèi)容，...

    lavnFan 評(píng)論0 收藏0

  • ES6-7

    摘要：的翻譯文檔由的維護(hù)很多人說(shuō)，阮老師已經(jīng)有一本關(guān)于的書了入門，覺(jué)得看看這本書就足夠了。前端的異步解決方案之和異步編程模式在前端開(kāi)發(fā)過(guò)程中，顯得越來(lái)越重要。為了讓編程更美好，我們就需要引入來(lái)降低異步編程的復(fù)雜性。 JavaScript Promise 迷你書（中文版） 超詳細(xì)介紹promise的gitbook，看完再不會(huì)promise...... 本書的目的是以目前還在制定中的ECMASc...

    mudiyouyou 評(píng)論0 收藏0

  • JavaScript 的 this 指向問(wèn)題深度解析

    摘要：而改變了這種狀態(tài)，雖然定義的類用運(yùn)算符得到的仍然是，但它不能像普通函數(shù)一樣直接調(diào)用同時(shí)，中定義的方法函數(shù)，也不能當(dāng)作構(gòu)造函數(shù)用來(lái)調(diào)用。而在中，用調(diào)用一個(gè)構(gòu)造函數(shù)，會(huì)創(chuàng)建一個(gè)新對(duì)象，而其中的就指向這個(gè)新對(duì)象。 JavaScript 中的 this 指向問(wèn)題有很多博客在解釋，仍然有很多人問(wèn)。上周我們的開(kāi)發(fā)團(tuán)隊(duì)連續(xù)兩個(gè)人遇到相關(guān)問(wèn)題，所以我不得不將關(guān)于前端構(gòu)建技術(shù)的交流會(huì)延長(zhǎng)了半個(gè)時(shí)候討論 ...

    liuchengxu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<