資訊專欄INFORMATION COLUMN
摘要：事件捕獲提出的事件流模型稱為事件捕獲。事件代理則是一種簡單有效的技巧，通過它可以把事件處理器添加到一個父級元素上，從而避免把事件處理器添加到多個子級元素上。更新無需重新綁定事件處理器，因為事件代理對不同子元素可采用不同處理方法。
首先我們思考一個很有意思的事情：一張紙上畫了兩個同心圓，當(dāng)我們把手指放到圓心上時，手指指向的不是一個圓，而是紙上的兩個圓，同理之，當(dāng)我們單擊網(wǎng)頁上的一個div塊的時候（代碼片段一），單擊事件會僅僅作用在這個div上面嗎？ 在瀏覽器發(fā)展到第四代時，IE和Netscape的開發(fā)團(tuán)隊都遇到這個問題，他們都一致認(rèn)為，除了單擊div塊，我們也單擊了body、 html、甚至是整個document，但不幸的是兩個團(tuán)隊針對事件流模型產(chǎn)生了兩個完全相反的概念。
代碼片段一：
事件流
Click me
1. 事件冒泡（推薦）
IE的事件流稱為事件冒泡。
即：事件由最具體的元素接收(div)，逐級向上傳播到不具體的節(jié)點(document)。
當(dāng)我們點擊代碼片段一中id為box的div塊時，單擊事件會按照如下順序傳播：
div ——> body——> html ——> document
如上圖所示，click首先在div元素上發(fā)生，然后沿著Dom樹向上傳播，每一級節(jié)點都會發(fā)生直至傳播到document對象。
測試代碼
事件流
測試效果:
2、事件捕獲note: 幾乎現(xiàn)代所有的瀏覽器都支持事件冒泡，不過有一些細(xì)微的差別
IE5.5 和 IE5.5 - 版本的事件冒泡會跳過html元素（body 直接到 document）
IE9、Firefox、Chrome、Safari則一直冒泡到window對象。
Netscape提出的事件流模型稱為事件捕獲。
即：事件從最不具體的節(jié)點開始接收（document），傳遞至最具體的節(jié)點，和IE的冒泡剛好相反， 事件捕獲的本意是當(dāng)事件到達(dá)預(yù)定目標(biāo)前捕獲它。當(dāng)我們點擊代碼片段一中id為box的div塊時，單擊事件會按照如下順序傳播：
document——> html ——> body ——> div3、DOM2級事件流note: 雖然事件捕獲是Netscape唯一支持的事件流模型，但I(xiàn)E9、Firefox、Chrome、Safari目前也都支持這種事件模型，由于老版本的瀏覽器并不支持，所以我們應(yīng)該盡量使用事件冒泡，有特殊需求的時候再考慮事件捕獲。
為了能夠兼容上述兩種事件模型，又提出了一個DOM2級事件模型，它規(guī)定了事件流包含三個階段：
事件捕獲階段：為事件捕獲提供機會；
處于目標(biāo)階段：事件的目標(biāo)接收到事件（但并不會做出響應(yīng)）；
事件冒泡階段：事件響應(yīng)階段；
在DOM2級事件流中，但我們點擊代碼片段一中的div，在事件捕獲階段從document ->html ->body就停止了（div元素在這個階段并不會接收到點擊事件）。緊接著，事件在div上發(fā)生，并把事件真正的處理看成是冒泡階段的一部分，然后，冒泡階段發(fā)生，事件又回傳到document。
測試代碼：
DOM2級事件流 4、事件流的典型應(yīng)用——事件代理測試結(jié)果
傳統(tǒng)的事件處理中，需要為每個元素添加事件處理器。js事件代理則是一種簡單有效的技巧，通過它可以把事件處理器添加到一個父級元素上，從而避免把事件處理器添加到多個子級元素上。
事件代理的原理用到的就是事件冒泡和目標(biāo)元素，把事件處理器添加到父元素，等待子元素事件冒泡，并且父元素能夠通過target（IE為srcElement）判斷是哪個子元素，從而做相應(yīng)處理, 下面舉例說明：
傳統(tǒng)的事件會為每個dom添加事件，代碼如下：
傳統(tǒng)的事件綁定
- red
- orange
- yellow
- green
- blue
- indigo
- purple
事件代理的處理方式如下：
傳統(tǒng)的事件綁定
- red
- orange
- yellow
- green
- blue
- indigo
- purple
使用事件代理的好處：
將多個事件處理器減少到一個，因為事件處理器要駐留內(nèi)存，這樣就提高了性能。想象如果有一個100行的表格，對比傳統(tǒng)的為每個單元格綁定事件處理器的方式和事件代理（即table上添加一個事件處理器），不難得出結(jié)論，事件代理確實避免了一些潛在的風(fēng)險，提高了性能。
DOM更新無需重新綁定事件處理器，因為事件代理對不同子元素可采用不同處理方法。如果新增其他子元素（a,span,div等），直接修改事件代理的事件處理函數(shù)即可，不需要重新綁定處理器，不需要再次循環(huán)遍歷。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/89695.html
摘要：深入理解事件機制一事件流事件就是當(dāng)用戶或者瀏覽器自身執(zhí)行的某種動作，諸如等都是事件的名稱，那響應(yīng)個事件的函數(shù)就稱為事件處理程序事件處理函數(shù)事件句柄。 深入理解js Dom事件機制（一）——事件流 事件就是當(dāng)用戶或者瀏覽器自身執(zhí)行的某種動作，諸如 click、mouseover等都是事件的名稱，那響應(yīng)個事件的函數(shù)就稱為事件處理程序（事件處理函數(shù)、事件句柄）。 事件處理程序的名字都是以on...
摘要：深入理解事件機制一事件流事件就是當(dāng)用戶或者瀏覽器自身執(zhí)行的某種動作，諸如等都是事件的名稱，那響應(yīng)個事件的函數(shù)就稱為事件處理程序事件處理函數(shù)事件句柄。 深入理解js Dom事件機制（一）——事件流 事件就是當(dāng)用戶或者瀏覽器自身執(zhí)行的某種動作，諸如 click、mouseover等都是事件的名稱，那響應(yīng)個事件的函數(shù)就稱為事件處理程序（事件處理函數(shù)、事件句柄）。 事件處理程序的名字都是以on...
摘要：所有節(jié)點中都包含這兩個方法，并且它們都接收個參數(shù)要處理的事件名作為事件處理程序的函數(shù)和一個布爾值。當(dāng)這個布爾值為時，表示在捕獲階段調(diào)用事件處理程序若果是，表示在冒泡階段調(diào)用事件處理程序。 事件流 定義： 1.事件流描述的是從頁面中接收事件的順序,也可理解為事件在頁面中傳播的順序。 2.事件就是用戶或瀏覽器自身執(zhí)行的某種動作。諸如click(點擊)、load(加載)、mouseover(...
摘要：禁止內(nèi)聯(lián)腳本執(zhí)行規(guī)則較嚴(yán)格，目前發(fā)現(xiàn)使用。合理使用上報可以及時發(fā)現(xiàn)，利于盡快修復(fù)問題。因為事件會從目標(biāo)元素一層層冒泡至對象。允許給一個事件注冊多個監(jiān)聽。表示在捕獲階段觸發(fā)，表示在冒泡階段觸發(fā)。 關(guān)于【Step-By-Step】 Step-By-Step (點擊進(jìn)入項目) 是我于 2019-05-20 開始的一個項目，每個工作日發(fā)布一道面試題。每個周末我會仔細(xì)閱讀大家的答案，整理最一份...
閱讀 2701·2021-11-19 09:56
閱讀 963·2021-09-24 10:25
閱讀 1766·2021-09-09 09:34
閱讀 2288·2021-09-09 09:33
閱讀 1119·2019-08-30 15:54
閱讀 637·2019-08-29 18:33
閱讀 1335·2019-08-29 17:19
閱讀 569·2019-08-29 14:19
