JavaScript、瀏覽器、事件之間的關係

JavaScript 程序採用了異步事件驅動編程（Event-driven programming）模型，維基百科對它的解釋是：

事件驅動程序設計（英語：Event-driven programming）是一種電腦程序設計模型。這種模型的程序運行流程是由用戶的動作（如鼠標的按鍵，鍵盤的按鍵動作）或者是由其他程序的消息來決定的。相對於批處理程序設計（batch programming）而言，程序運行的流程是由程序員來決定。批量的程序設計在初級程序設計教學課程上是一種方式。然而，事件驅動程序設計這種設計模型是在交互程序（Interactive program）的情況下孕育而生的

簡頁言之，在 web 前端編程裡面 JavaScript 通過瀏覽器提供的事件模型 API 和用戶交互，接收用戶的輸入

由於用戶的行為是不確定的，也就是說不知道用戶什麼時候發生點擊、滾動這些動作。這種場景是傳統的同步編程模型沒法解決的，因為你不可能等用戶操作完了才執行後面的代碼

比如我們在 Python 裡面調用接收用戶輸入的方法 raw_input() 後終端就會一直等待用戶的輸入，直到輸入完成才會執行後面的代碼邏輯。但是在下面這段 NodeJS 代碼中，接收用戶輸入的方法 process.stdin.read 是在一個事件中調用的。後面的代碼不會被阻塞（blocked）

事件驅動程序模型基本的實現原理基本上都是使用 事件循環（Event Loop），這部分內容涉及瀏覽器事件模型、回調原理，有興趣的去看鏈接裡面的視頻學習下

需要說明的是在客戶端 JavaScript 中像 setTimeout, XMLHTTPRequest 這類 API 並不是JavaScript 語言本身就有的。而是 JavaScript 的宿主環境（在客戶端 JavaScript 中就是瀏覽器），同樣像 DOM、BOM、Event API 都是瀏覽器提供的

事件綁定的方法

DOM 元素行內綁定

直接在 DOM 元素上通過設置 on + eventType 來綁定事件處理程序

這種綁定方法是最原始的，有兩個缺點：

1 事件處理程序和 HTML 結構混雜在一起

早期在結構、樣式、表現分離的時代很忌諱這一點。現在看來在很多 MVX 框架中將事件綁定和 DOM 結構放在一起處理，這樣似乎更方便維護（不用來回切換 HTML,JavaScript 文件），而且也符合可預見（predictable）性的規則

2 命名空間衝突

因為 onclick 中的 JavaScript 代碼片段執行環境是全局作用域。然而在 JavaScript 語言中並沒有相關的命名空間特性。所以就很容易造成命名空間的衝突，非要用這種方法綁定事件的話只能用對象來做一些封裝

古老的綁定方法

使用 DOM Element 上面的 on + eventType 屬性 API

這種方法也有一個缺點，因為屬性賦值會覆蓋原值的。所以無法綁定 多個 事件處理函數，如果我們要註冊多個 onload 事件處理程序的話就得自己封裝一個方法來防止這種事情發生，下面這個例子可以解決這個問題

注意這只是個示例，生產環境很少會用到。一般用 DOM Ready 就可以了，因為 JavaScript 的執行通常不用等到頁面資源全部加載完，DOM 加載完就可以了

現代/標準的綁定方法

標準的綁定方法有兩種，addEventListener 和 attachEvent 前者是標準瀏覽器支持的 API，後者是 IE 8 以下瀏覽器支持的 API。通常需要我們做個兼容封裝

上面的例子在 IE 8 以下和標準瀏覽器的效果是不一樣的，問題就在於 addEventListener 中的事件回調函數中的 this 指向元素（target）本身，而 attachEvent 則指向 window 為了修復這個問題上面的 attachEvent 可以做一點小調整讓其保持和 addEventListener 的效果一樣，不過這樣的話註冊的 handler 就是個匿名函數，無法再移除！

當上面這幾種情況同時出現的時候就比較有意思了，可以試試下面這段代碼的你輸出

正確的結果應該是 3,4,5,1，根據結果我們可以得出以下結論：

【1】鏈接上的 href 偽 javascript 協議相當於在瀏覽器地址欄執行了一段 JavaScript 代碼，鏈接如果是這種格式，點擊的時候相當於執行了這段 JavaScript 腳本

【2】行內的事件綁定和元素調用 onclick 綁定事件會覆蓋

【3】使用 jQuery（內部使用標準事件註冊 API）可以綁定多個事件處理程序

事件冒泡

大部分事件會沿著事件觸發的目標元素往上傳播。比如：body>div>p>span 如果他們都註冊了點擊事件，那麼在 span 元素上觸發點擊事件後 p,div,body 各自的點擊事件也會按順序觸發

事件冒泡是可以被停止的，下面這個函數封閉了停止事件冒泡的方法：

事件對象

標準瀏覽器中在事件處理程序被調用時 事件對象 會通過參數傳遞給處理程序，IE 8 及以下瀏覽器中事件對象可以通過全局的 window.event 來訪問。比如我們要獲取當前點擊的 DOM Element

事件代理

有時候我們需要給

為了解決這個問題，我們通常使用事件代理/委託（Event Delegation ）。而且通常來說使用 事件代理的性能會比單獨綁定事件高 很多，我們來看個例子

 
item1

 
item2

 
item3

 
item4

 
item5

 

假如 ul 中的 HTML 是 Ajax 異步插入的，通常我們的做法是 插入完成後遍歷每個 li 綁定事件處理程序
我們再使用事件代理把事件綁定到 ul 元素上，我們知道很多事件可以冒並沿著 DOM 樹傳播到所有的父元素上，我們只需要判斷目標元素是不是我們想綁定的真正元素即可
 
顯然使用了事件代理之後，代碼變少了。邏輯也很清晰，關鍵是以前需要 N 次的綁定操作現在只需要一次
jQuery 中的事件綁定
以 jQuery1.6.4 為例，jQuery 提供了很多事件綁定的 API。例如： delegate(), bind(), click(), hover(), one(), live()，這些方法其實都是一些別名，核心是調用了 jQuery 底層事件的 jQuery.event.add 方法。其實現也是上文提到的 addEventListener 和 attachEvent 兩個 API
這些 API 主要是為了方便綁定事件的各種場景，並且內部處理好了兼容性問題。還有一個比較好用的地方就是 事件命名空間。比如：兩個彈出層都向 document 綁定了點擊關閉事件，但是如果只想解綁其中一個。這時候使用命名空間再合適不過了。
 
 

                

            

            
            
            
            
            
            
            
            
            
            
            

            



分享到:



 閱讀更多  JS加加網 
的文章

關鍵字:
事件驅動
設計
jQuer