2. 程式人生 > >Javascript高級編程學習筆記（57）—— 事件（1）事件流

Javascript高級編程學習筆記（57）—— 事件（1）事件流

阿新 • • 發佈：2019-02-08
向上 發生 什麽 div window document 描述 實現 窗口

事件

JS與HTML的交互是通過事件實現的

而事件指的就是：文檔或瀏覽器窗口特定的交互瞬間

可以通過偵聽器來預定事件，以便在事件發生時執行相應的代碼

這種模式也是設計模式中的觀察者模式

事件流

有了事件，也就有了事件流的概念

事件流故名思意：也就是事件的流向，所以事件流描述的是從頁面中接收事件的順序

雖然事件流描述的都是事件的流向，但是事件流在當時的兩個最大的瀏覽器廠商的提出中卻是兩個差不多完全相反的事件流概念

一是IE的冒泡事件流，二是Netscape的捕獲事件流

事件冒泡

即事件開始時由最具體的元素（也就是文檔中層次最深的元素）接收，然後逐級向上傳播到較為不具體的節點

以下方的HTML代碼舉例：

<!DOCTYPE html>
<html>
    <head>
        <title> lhy <title>
    <head>
    <body>
        <div id="myDiv"> Click me</div>
    <body>
<html>

如果我們點擊div元素

那麽這個點擊事件將會按照以下順序傳播

  1. <div>
  2. <body>
  3. <html>
  4. document

基本上所有的現代瀏覽器都支持冒泡事件流，有區別的地方僅僅在於冒泡到什麽地方為止

一般來說主流的高級瀏覽器冒泡都會傳遞到window才停止

事件捕獲

Netscape 團隊提出的另一種事件流叫事件捕獲

事件捕獲的概念與事件冒泡的概念相反：即事件先發生在不太具體的元素，然後向下傳遞到較為具體的元素

仍以剛才上方的HTML為例，那麽事件的觸發順序為：

  1. document
  2. <html>
  3. <body>
  4. <div>

雖然DOM2級事件規範要求事件應該從document開始傳播

但是實現了事件捕獲的瀏覽器基本上都是從window開始傳播的

需要註意的是，事件捕獲老版本瀏覽器不支持，但是事件冒泡沒有這一限制

DOM事件流

“DOM2級事件”規定事件流包括三個階段：

  1. 事件捕獲階段
  2. 處於目標階段
  3. 事件冒泡階段

同樣以上方的HTML代碼為例，DOM事件流的觸發順序如下：

  1. document
  2. <html>
  3. <body>
  4. <div>
  5. <body>
  6. <html>
  7. document

上述過程中 1~3 是事件捕獲階段，4是處於目標階段，5~7是事件冒泡階段

在DOM2級規範中，處於目標階段應屬於冒泡階段

但實際上在瀏覽器的實現中在捕獲階段和冒泡階段都會觸發目標元素的事件

所以我們有兩個機會在目標對象上操作事件

Javascript高級編程學習筆記（57）—— 事件（1）事件流

相關推薦

Javascript高級編程學習筆記（6）—— 流程控制語句

新的 初始化 大量 導致 原因 能力 操作符 循環 對象屬性 話不多說，我們直接開始進入今天的主題 流程控制語句 首先什麽是流程控制語句呢？ 顧名思義，就是控制流程的語句。 在JS中語句定義了ECMAScript中的主要語法，讓我們可以使用一系列的關鍵字來完成指定任務。 語

Javascript高級編程學習筆記（12）—— 引用類型（1）Object類型

一點 下使用 rip 中括號 clas bsp 情況 https 可選參數 前面的文章中我們知道JS中的值分為兩種類型 基礎類型的值和引用類型的值 基礎類型的值我已經大概介紹了一下，今天開始後面幾天我會為大家介紹一下引用類型的值 Object類型 對象是引用類型的值的實

Javascript高級編程學習筆記（29）—— BOM（3）location對象

前端 doc 位置 pro 前端路由 localhost 返回 protocol 從服務器 在JS中location是一個神奇的對象 它既是window對象的屬性，也是document對象的屬性 它的作用主要在於保存當前文檔頁面的信息，以及將 url 解析為獨立的片段

Javascript高級編程學習筆記（36）—— DOM（2）Document

ctype named views 瀏覽器 鼠標 小寫 形式 pen syn Documet類型 了解了基礎的Node類型過後，我們來聊聊Node中的Document類型 我們知道所有的節點都繼承自Node類型 所以除了Node類型公有的方法和類型之外，Document類型

Javascript高級編程學習筆記（41）—— DOM（7）DocumentFragment類型

然而 多少 pan 分享圖片 重繪 http 節點 () rip DocumentFragment類型 除開昨天我們了解的兩種不常用的類型之外 今天我們要介紹的兩種類型可以說使用頻率不輸於前面最常用的幾種元素類型 首先就是DocumentFragment類型 有些小夥伴

Javascript高級編程學習筆記（47）—— 元素遍歷

del clas 原來 != 出了 next javascrip 學習筆記 pan 元素遍歷 為了方便我們使用JS來遍歷文檔中的元素，W3C在原來的基礎之上提出了 Element Traversal 規範 這一規範主要就是為了統一瀏覽器對文檔中節點解析不一致的問題。 比如在

Javascript高級編程學習筆記（53）—— DOM2和DOM3（5）遍歷

cas 註意 父節點 ESS 構建 執行 方法 顯示 簡單 遍歷 “DOM2級遍歷和範圍” 定義了兩個用於輔助完成順序遍歷的DOM結構類型 NodeIterator 和 TreeWalk 上述兩種類型可以基於給定起點的DOM結構執行深度優先的遍歷操作 對於檢測瀏覽器對於該功

Javascript高級編程學習筆記（54）—— DOM2和DOM3（6）範圍選擇

star pan 簡單選擇 create 兼容 rto === java tno 範圍 為了讓開發人員更加方便地控制頁面“DOM2級遍歷和範圍”模塊定義了“範圍”接口 通過該接口開發人員可以選擇文檔中的一個區域，而不必考慮元素的界限 在常規操作不能有效地修改文檔時，使用範圍

Javascript高級編程學習筆記（55）—— DOM2和DOM3（7）操作範圍

extra 復制 運行 pen 創建 結構 element 全部 插入內容 操作範圍中的內容 在創建範圍時，內部會為這個範圍創建一個文檔片段 範圍所屬的全部節點都會被添加到這個片段中 雖然選取範圍可以不是完整的、良好的DOM結構 但是在這個為範圍創建的文檔片段中，會自己完缺

Javascript高級編程學習筆記（56）—— DOM2和DOM3（8）低版本IE範圍

ext logs 中文 tel end 標簽 idt 動態 www 雖然IE9支持了DOM範圍，但是IE8及更早版本並不支持DOM範圍 所以IE8以下的更早版本的IE提出了與之類似的概念以供大家使用 也就是 文本範圍 var range = document.body.

Javascript高級編程學習筆記（57）—— 事件（1）事件流

向上 發生 什麽 div window document 描述 實現 窗口 事件 JS與HTML的交互是通過事件實現的 而事件指的就是：文檔或瀏覽器窗口特定的交互瞬間 可以通過偵聽器來預定事件，以便在事件發生時執行相應的代碼 這種模式也是設計模式中的觀察者模式 事件

Javascript高級編程學習筆記（58）—— 事件（2）事件處理程序

三個參數 ner load 對象 高級 方法 條件 只需要 結果 事件處理程序 事件處理程序即響應某個事件的函數 事件處理程序以 “on” 開頭 如“onclick”，“onload” HTML事件處理程序 某個元素支持的每種事件都可以使用一個與響應的事件處理程序同名的

Javascript高級編程學習筆記（59）—— 事件（3）事件對象

val 訪問 dom0 clas ppr 阻止默認行為 javascrip 特性 關聯 事件對象 在觸發DOM‘事件時，會產生一個事件對象 event 該對象包含著所有與事件有關的信息 所有瀏覽器都支持 event 對象但是支持的方式有所不同 DOM事件對象 兼容DOM

Javascript高級編程學習筆記（60）—— 事件（4）事件類型

發生 重新 失去 事件 高級編程 輸入法 dom 輸入 觸發 事件類型 Web瀏覽器中可能發生的事件有許多種類型 不同類型的事件都有著自己獨特的信息 在“DOM3級事件”規範中，規定了以下幾類事件： UI事件 當用戶與頁面元素交互時觸發 焦點事件 當元素失去或

Javascript高級編程學習筆記（61）—— 事件（5）UI事件

提示 響應 滾動 tle 區別 用戶 mod 實現 asf UI事件 UI事件是指那些不一定與用戶操作有關的事件 這些事件在DOM規範出現之前，都是以各種不同的形式存在於不同的瀏覽器 而在DOM事件中為了保證向後兼容，現有的UI事件如下： DOMActivate：表示

Javascript高級編程學習筆記（71）—— 模擬事件（1）DOM事件模擬

需要 some 按鍵 之前 color dom元素 方法 event 元素 事件，指的是網頁中某個特定的交互時刻 一般來說事件由瀏覽器廠商負責提供，一般由用戶操作或者其它瀏覽器功能來觸發 但是有一類特殊的事件，那就是由我們開發人員通過JS觸發的事件 這些事件和瀏

Javascript高級編程學習筆記（81）—— 富文本(1)

進行 win 其它 func 屬性設置 富文本編輯 idt 所見 文本框 富文本編輯 富文本編輯又稱為: WYSIWYG(What You See Is What You Get,所見即所得) 常用於博客等用途,雖然沒有規範,但是在IE最先引入後其他的瀏覽器廠商也相繼完

Javascript高級編程學習筆記（87）—— Canvas(4)繪制路徑

drawing pre scrip 都是 als color 一點 控制 clas 繪制路徑 2D上下文支持許多在畫布上繪制路徑的方法 通過路徑可以創造出復雜的形狀和線條,要繪制路徑首先必須調用beginPath()方法,表示開始繪制路徑 然後再通過下列的方法繪制路徑

Javascript高級編程學習筆記（94）—— Canvas(11) 合成

asc tex 字符 contex copy posit 存在 mage con 合成 除了之前介紹的屬性之外,還有兩個屬性會應用到整個2d上下文中; globalAlpha 用於指定所有繪制的透明度 globalComposition 用於表示後繪制的圖形怎樣與

Asp.net MVC4高級編程學習筆記-視圖學習第一課20171009

強類型 編寫 ret namespace i++ 智能 權限 eba 轉換成 首先解釋下：本文只是對Asp.net MVC4高級編程這本書學習記錄的學習筆記，書本內容感覺挺簡單的，但學習容易忘記，因此在邊看的同時邊作下了筆記，可能其它朋友看的話沒有情境和邏輯順序還請諒解