對javascript事件的深度理解

zxhaaa 發布于2019-08-20 18:35 / 350人閱讀

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

事件流

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

我們通過平常使用知道addEventListener最后的參數是切換句柄的，當這個布爾值為true時，表示在捕獲階段調用事件處理程序；若果是false，表示在冒泡階段調用事件處理程序。

MDN：useCapture 可選（）
Boolean，是指在DOM樹中，注冊了該listener的元素，是否會先于它下方的任何事件目標，接收到該事件。沿著DOM樹向上冒泡的事件不會觸發被指定為use capture（也就是設為true）的listener。當一個元素嵌套了另一個元素，兩個元素都對同一個事件注冊了一個處理函數時，所發生的事件冒泡和事件捕獲是兩種不同的事件傳播方式。事件傳播模式決定了元素以哪個順序接收事件。

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 規范中提供的注冊事件監聽器的方法。它的優點包括：

它允許給一個事件注冊多個 listener。當存在其他的庫時，使用 DHTML 庫或者 Mozilla extensions 不會出現問題。

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

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

事件冒泡

IE的事件流叫事件冒泡，逐級向上傳播

點擊div之后，順序是div -> body -> html

事件捕獲

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

DOM事件流

DOM規定的事件流包括三個階段

捕獲階段

目標階段

冒泡階段

事件捕獲階段，為截獲事件提供機會，然后是實際的目標接受事件，最后是事件冒泡階段




  
  
  
  Document

事件的作用范圍

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

GPU云服務器云服務器對python的理解談談對php的理解對人工智能的理解對云服務器的理解

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84731.html

JavasScript重難點知識

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

forsigner 2019-08-21 18:36 評論0 收藏0
TypeScript VS JavaScript 深度對比

摘要：是事件驅動的，只根據用戶的操作做出相應的反應處理。中的數據要求帶有明確的類型，不要求。這些小小的變化可能會產生嚴重的意想不到的后果，因此有必要撤銷這些變化。的優勢相比于，也有一些明顯優勢。因此在應對大型開發項目時，使用更加合適。 showImg(https://segmentfault.com/img/bV1Dx7?w=740&h=322); TypeScript 和 JavaScri...

William_Sang 2019-08-21 18:43 評論0 收藏0
前端每周清單第 56 期: D3 5.0，深入 React 事件系統，SketchCode 界面生成

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

lavnFan 2019-08-22 15:45 評論0 收藏0
ES6-7

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

mudiyouyou 2019-08-21 18:40 評論0 收藏0
JavaScript 的 this 指向問題深度解析

摘要：而改變了這種狀態，雖然定義的類用運算符得到的仍然是，但它不能像普通函數一樣直接調用同時，中定義的方法函數，也不能當作構造函數用來調用。而在中，用調用一個構造函數，會創建一個新對象，而其中的就指向這個新對象。 JavaScript 中的 this 指向問題有很多博客在解釋，仍然有很多人問。上周我們的開發團隊連續兩個人遇到相關問題，所以我不得不將關于前端構建技術的交流會延長了半個時候討論 ...

liuchengxu 2019-08-20 14:22 評論0 收藏0