資訊專欄INFORMATION COLUMN
摘要：三事件流規定事件包括三個階段，事件捕獲，處于目標階段事件冒泡。一起來看添加新增加的，點擊發現沒有反應，說明事件沒有綁定進去，但是我們也并不想，每增加一個新元素，就為這個新元素綁定事件，重復低效率的工作應當避免去做。
本文共 1960 字，讀完只需 8 分鐘事件
用戶與網頁交互是通過事件實現的，事件剛開始是作為分擔服務器負載的一個手段，起初沒有統一的規范，直到 DOM2 級，網景和 IE 才開始有各自的 API 規范。
對于事件的觸發機制，兩個公司都認為頁面的觸發機制并不只是點擊了某個元素，就只觸發當前目標元素的事件。
比方說：頁面有多個同心圓，當點擊最里面的圓時，你其實也點擊了包含這個圓外面的那些圓。 兩個公司對這點的認同是一致的，但是事件流的傳播順序上采用了不同的兩種方案來實現，即事件冒泡和事件捕獲。
一、事件冒泡IE 瀏覽器從老版本開始就一直支持事件冒泡機制，所謂事件冒泡，指事件流開始是從較為具體的元素接收，一直傳播上不具體的元素上。
就是從目標元素傳播到父級元素。
如下圖所示，如果點擊了 id 為 child 的元素后，事件流會從 child 一直傳播到 window 對象。
所有現代瀏覽器都支持事件冒泡。
二、事件捕獲由網景公司主導的事件捕獲則剛好和事件冒泡相反，事件流開始從不具體的元素觸發，然后傳播到具體的元素上。簡而言之就是從父級元素傳播到目標元素。
由于事件捕獲是從 IE 9開始支持，不兼容老版本瀏覽器，所以使用的人比較少。
三、事件流DOM 規定事件包括三個階段，事件捕獲，處于目標階段、事件冒泡。
從 IE 9 開始的瀏覽器規定，事件流的順序先是事件捕獲，會截獲到事件，然后是處于目標階段，實際的目標接收到事件，最后是事件冒泡，可以在這個階段對事件進行響應。
以之前的 child 元素為例，直到 child 元素接收到事件前（從 window 到 parent），都是事件捕獲階段。到了 child 元素，此時對事件進行處理，隨后冒泡到 window 對象上，冒泡階段也是可以對事件進行處理的。 基于事件冒泡能對事件進行處理的特點，隨后將講到與其有關的事件委托機制。
四、事件綁定HTML 與 事件的綁定有三種形式：
1.
2.
var childEl = document.getElementById("child");
childEl.onclick = function() {
console.log("hello");
}
3.
var childEl = document.getElementById("child");
childEl.addEventListener("click", function() {
console.log("hello");
}, false);
JavaScript 是單線程的語言，在遇到元素有事件觸發時，會在事件隊列中尋找有沒有與這個事件綁定的函數，如果沒有則什么都不做，如果有，則將該函數放到事件隊列的前面，等待主線程事件執行完畢后執行。
上述代碼第一種綁定，將事件寫在 html 中，表現和行為沒有解耦，是不建議這樣寫代碼的。
第二種綁定，將事件綁定在元素對象上，這種寫法主要是容易發生事件的覆蓋。
第三種綁定，首先，第三個參數為布爾值，默認為 false, 表示在事件冒泡階段調用事件處理程序，如果為 true, 則表示在事件捕獲階段調用事件處理函數。
當我們想處理完一次事件后，將不想在處理該元素的事件綁定時，應該將元素的事件綁定置為空，如果容易發生內存泄漏。
第一種寫法：
childEl.onclick = null;
第三種寫法：
function eventHandler() {
console.log("hello");
}
childEl.addEventListener("click", eventHandler, false);
childEl.removeEventListener("click", eventHandler, false);
五、事件委托（事件代理）
事件委托是利用事件冒泡的性質，事件流開始是從較為具體的元素接收，一直傳播上不具體的元素上。
首先，假如有一個列表 ul，每個列表元素 li 點擊會觸發事件處理程序，顯然，如果一個一個地給元素綁定事件, 效率肯定不好。
與此同時，當新增一個元素時，事件不見得會綁定成功。一起來看：
新增加的 menu-new，點擊發現沒有反應，說明事件沒有綁定進去，但是我們也并不想，每增加一個新元素，就為這個新元素綁定事件，重復低效率的工作應當避免去做。
我們通過事件委托的思路來想，事件流的傳播，目標元素本身依然會有事件，但同時，冒泡出去后，更高層次的 dom 也能處理事件程序。那么，我們只需要給高層次節點綁定事件，通過判斷具體是觸發的哪個子節點，再做相應的事件處理。
menu 列表的每個子菜單元素的事件都能正確響應，新增的 menu-new 同樣也能正確響應事件。
事件委托的好處在于，我們不用給每個元素都一一地手動添加綁定事件，避免重復低效的工作。
其次，事件委托更少得獲取 dom, 初始化元素對象和事件函數，能有效減少內存占用。
每當將事件程序指定給元素時，html 代碼和 js 代碼之間就建立了一個連接，這種連接越多，網頁就執行起來越慢，所以事件委托能有效減少連接樹，提高網頁性能。
總結用戶與網頁的交互是通過事件進行的，事件模型分為事件冒泡和事件捕獲，事件冒泡的兼容性更好，應用更廣，同時通過事件冒泡，可以建立事件委托，提升網頁性能。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/108760.html
摘要：在這個事件發生期間，調用可阻止滾動當手指從屏幕上移開時觸發。關于此事件的確切觸發事件，文檔中沒有明確說明。特定于事件目標的對象的數組。 JS事件模型 事件模型以及周邊 事件捕獲 事件冒泡 事件觸發 移動端事件模擬 事件委托 事件流 事件捕獲(event capturing)&事件冒泡(event bubbling) 給inner,out均綁定點擊事件.點擊inne...
摘要：而異步則是相反，調用在發出之后，這個調用就直接返回了，所以沒有返回結果而是在調用發出后，被調用者通過狀態通知來通知調用者，或通過回調函數處理這個調用。總結回調函數是異步編程中的基石，但同時也存在很多問題，不太適合人類自然語言的線性思維習慣。 為什么 JS 是單線程？ 眾所周知，Javascript 語言的執行環境是單線程（single thread）。 所謂單線程，就是指一次只能完成一...
摘要：道阻且長啊前端面試總結前端面試筆試面試騰訊一面瀏覽器工作原理瀏覽器的主要組件包括用戶界面包括地址欄后退前進按鈕書簽目錄瀏覽器引擎用來查詢及操作渲染引擎的接口渲染引擎渲染界面和是基于兩種渲染引擎構建的，使用自主研發的渲染引擎，和都使用網絡用來 道阻且長啊TAT(前端面試總結) 前端 面試 筆試 面試 騰訊一面 1.瀏覽器工作原理 瀏覽器的主要組件包括： 用戶界面－ 包括地址欄、后退/前...
閱讀 2818·2023-04-25 15:01
閱讀 3049·2021-11-23 10:07
閱讀 3364·2021-10-12 10:12
閱讀 3455·2021-08-30 09:45
閱讀 2194·2021-08-20 09:36
閱讀 3586·2019-08-30 12:59
閱讀 2430·2019-08-26 13:52
閱讀 934·2019-08-26 13:24
