分享前還是先分享自己的web前端學習交流群：614315657群內不定時分享乾貨， 包括2017最新的web前端企業案例學習資料和零基礎入門教程， 歡迎初學和進階中的小夥伴入群學習交流
JavaScript、流覽器、工作之間的關係
JavaScript 程式採用了非同步工作驅動程式設計（Event-driven programming）模型， 維琪百科對它的解釋是：
工作驅動程式設計（英語：Event-driven programming）是一種電腦程式設計模型。 這種模型的程式運轉流程是由使用者的動作（如滑鼠的按鍵， 鍵盤的按鍵動作）或者是由其他程式的音訊來決議的。 相對於批次程式設計（batch programming）而言， 程式運轉的流程是由程式師來決議。
簡頁言之， 在 web 前端程式設計裡邊 JavaScript 經過流覽器提供的工作模型 API 和使用者交互， 接納用戶的輸入
由於用戶的行為是不確定的，
比方我們在 Python 裡邊調用接納用戶輸入的辦法 raw_input() 後終端就會一向等待使用者的輸入， 直到輸入完成才會履行後邊的代碼邏輯。 可是在下面這段 NodeJS 代碼中， 接納用戶輸入的辦法 process.stdin.read 是在一個工作中調用的。 後邊的代碼不會被堵塞（blocked）
JavaScript
'use strict';
process.stdin.on('readable', () => {
var chunk = process.stdin.read();
if (chunk !== null) {
process.stdout.write(`Async output data: ${chunk}`);
}
});
process.stdin.on('end', () => {
process.stdout.write('end');
});
console.log('Will not be blocked');
工作驅動程式模型基本的實現原理基本上都是運用 工作迴圈（Event Loop）， 這部分內容涉及流覽器工作模型、回檔原理， 有興趣的去看連結裡邊的視頻學習下
需求說明的是在用戶端 JavaScript 中像 setTimeout, XMLHTTPRequest 這類 API 並不是 JavaScript 語言自身就有的。 而是 JavaScript 的宿主環境（在用戶端 JavaScript 中就是流覽器），
工作綁定的辦法
DOM 元素行內綁定
直接在 DOM 元素上經過設置 on + eventType 來綁定工作處理常式
XHTML
1
href="#none" onclick="alert('clicked.')">點擊我
這種綁定辦法是最原始的， 有兩個缺陷：
1 工作處理常式和 HTML 結構混雜在一同
前期在結構、樣式、體現分離的時代很忌諱這一點。
2 命名空間抵觸
由於 onclick 中的 JavaScript 代碼片段履行環境是大局效果域。 然而在 JavaScript 語言中並沒有相關的命名空間特性。 所以就很容易形成命名空間的抵觸， 非要用這種辦法綁定工作的話只能用目標來做一些封裝
陳舊的綁定辦法
運用 DOM Element 上面的 on + eventType 特點 API
注意這僅僅個示例， 生產環境很少會用到。 一般用 DOM Ready 就能夠了， 由於 JavaScript 的履行一般不用等到頁面資源全部載入完， DOM 載入完就能夠了
現代/規範的綁定辦法
規範的綁定辦法有兩種， addEventListener 和 attachEvent 前者是規範流覽器支援的 API， 後者是 IE 8 以下流覽器支持的 API。 一般需求我們做個相容封裝
JavaScript
href="javascript:alert(1)" onclick="alert(2)" id="link">click me
正確的結果應該是 3,4,5,1， 根據結果我們能夠得出以下結論：
連結上的 href 偽 javascript 協議相當於在流覽器位址欄履行了一段 JavaScript 代碼， 連結如果是這種格式， 點擊的時分相當於履行了這段 JavaScript 腳本
行內的工作綁定和元素調用 onclick 綁定工作會掩蓋
運用 jQuery（內部運用規範工作註冊 API）能夠綁定多個工作處理常式
工作冒泡
大部分工作會沿著工作觸發的目標元素往上傳播。 比方：body>div>p>span 如果他們都註冊了點擊工作， 那麼在 span 元素上觸發點擊工作後 p,div,body 各自的點擊工作也會按次序觸發
工作冒泡是能夠被中止的， 下面這個函數封閉了中止工作冒泡的辦法：
JavaScript
工作署理
有時分我們需求給 不存在的（可能將來會有）的一段 DOM 元素綁定工作，比方給一段 Ajax 請求完成後渲染的 DOM 節點綁定工作。一般綁定的邏輯會在渲染前履行，綁定的時分找不到元素所以並不能成功，當然你也能夠把綁定工作的代碼放在 Ajax 請求之後。這樣做在一些工作邏輯簡單的使用裡邊沒問題，可是會加重資料渲染邏輯和工作處理的邏輯耦合。一但工作處理常式特別多的時分，我們一般建議把工作的邏輯和其它代碼邏輯分離，這樣便利保護。
為了處理這個問題，我們一般運用工作署理/託付（Event Delegation ）。並且一般來說運用 工作署理的功能會比獨自綁定工作高 許多
寫在最後：
篇幅有限，今天先分享這麼多，如果大家喜歡的話我會再更新，專注學習web前端技術的小夥伴可以進群（614315657）一起交流學習，群裡還有大量學習資料可供大家自行下載參看，歡迎大家一起來交流討論。
工作署理
有時分我們需求給 不存在的（可能將來會有）的一段 DOM 元素綁定工作，比方給一段 Ajax 請求完成後渲染的 DOM 節點綁定工作。一般綁定的邏輯會在渲染前履行，綁定的時分找不到元素所以並不能成功，當然你也能夠把綁定工作的代碼放在 Ajax 請求之後。這樣做在一些工作邏輯簡單的使用裡邊沒問題，可是會加重資料渲染邏輯和工作處理的邏輯耦合。一但工作處理常式特別多的時分，我們一般建議把工作的邏輯和其它代碼邏輯分離，這樣便利保護。
為了處理這個問題，我們一般運用工作署理/託付（Event Delegation ）。並且一般來說運用 工作署理的功能會比獨自綁定工作高 許多
寫在最後：
篇幅有限，今天先分享這麼多，如果大家喜歡的話我會再更新，專注學習web前端技術的小夥伴可以進群（614315657）一起交流學習，群裡還有大量學習資料可供大家自行下載參看，歡迎大家一起來交流討論。