資訊專(zhuān)欄INFORMATION COLUMN
摘要：說(shuō)明這篇文章說(shuō)中的事件委托，這次先說(shuō)一些比較基本的知識(shí)。第一段綁定了兩次事件，第二段綁定了一次事件也就是說(shuō)，原來(lái)在上綁定的事件，現(xiàn)在委托在了父元素上，而在上只需要綁定一次就可以了。我們用事件委托的方式，再來(lái)改改。
說(shuō)明
這篇文章說(shuō)JavaScript中的事件委托，這次先說(shuō)一些比較基本的知識(shí)。
事件委托 是什么先來(lái)看看事件委托的概念
事件委托就是利用事件冒泡，只指定一個(gè)事件處理程序，就可以管理某一類(lèi)型的所有事件。
事件委托，你叫他 事件代理 也可以，都是一個(gè)意思。
事件：JavaScript 偵測(cè)到的行為就是事件，比如鼠標(biāo)點(diǎn)擊、某個(gè)鍵盤(pán)的鍵被按下、元素獲得焦點(diǎn)。
委托：就是把原來(lái)自己做的事，交給別人做。
要說(shuō)事件委托的原理，我們應(yīng)該先明白事件冒泡
事件冒泡：從目標(biāo)元素出發(fā)，向外層元素冒泡，最后到達(dá)頂層（window或document），依次執(zhí)行綁定在其上的事件。
我們來(lái)看段代碼
效果圖
從上面的圖中我們看見(jiàn)，當(dāng)點(diǎn)擊 藍(lán)色 p 元素時(shí)，先觸發(fā)了 p 元素上綁定的事件，然后又觸發(fā)了 紅色 div 元素上綁定的事件，這就是事件冒泡了。
事件委托 的實(shí)現(xiàn)先來(lái)段代碼
我們用事件委托的方式改寫(xiě)一下上面的代碼，不過(guò)在這之前，我們還要明白一下什么是 event 對(duì)象
任何事件觸發(fā)后將產(chǎn)生一個(gè)event對(duì)象
event對(duì)象記錄事件發(fā)生時(shí)的鼠標(biāo)位置、鍵盤(pán)按鍵狀態(tài)和 觸發(fā)對(duì)象等信息
一般情況下，綁定事件處理函數(shù)時(shí)，event對(duì)象默認(rèn)以第一個(gè)參數(shù)方式傳入
event對(duì)象有許多的屬性，具體的可以到這里去看
http://www.w3school.com.cn/js...
如果用事件委托，那代碼就是這樣的
上面的代碼，應(yīng)該很容易看懂的，我們看看他們的區(qū)別
1、第一段代碼是在 每個(gè) li 上綁定事件，第二段只是在 li 的父元素 ul 上綁事件。
2、第一段綁定了兩次事件，第二段綁定了一次事件
也就是說(shuō)，原來(lái)在 li 上綁定的事件，現(xiàn)在委托在了父元素 ul 上，而在 ul 上只需要綁定一次就可以了。
我們?cè)賮?lái)看另一種情況，當(dāng)元素最開(kāi)始不存在時(shí)，需要綁定事件，最先能想到會(huì)出現(xiàn)這種情況的場(chǎng)景就是，元素是通過(guò)發(fā)請(qǐng)求，獲取數(shù)據(jù)后，拼接到頁(yè)面上的。而這種元素如果在發(fā)請(qǐng)求之前就綁定事件，是不會(huì)生效的。
上面這段代碼中，在元素 li3 還不存在的時(shí)候就綁定事件了，所以執(zhí)行代碼后就會(huì)報(bào)錯(cuò)
解決這個(gè)問(wèn)題最直接的辦法就是等元素添加到頁(yè)面上之后，再綁定事件，我們來(lái)改改代碼。
改成這樣后，綁定事件就可以起作用了，但是這樣如果元素改變多次，就要元素渲染一次，就綁定一次事件，顯然是有點(diǎn)麻煩了。
我們用事件委托的方式，再來(lái)改改。
上面這段代碼，我們用事件委托的方式，并不在生成的元素上綁定事件，而是在生成元素的父元素上綁定事件，因?yàn)楦冈厥且恢贝嬖诘?，所以綁定的事件就可以生效?/p> 事件委托 的好處
1、減少了事件監(jiān)聽(tīng)器，原來(lái)需要在多個(gè)子元素綁定相同的事件處理函數(shù)，現(xiàn)在只需要在祖先元素（一般為父元素）上統(tǒng)一定義一次即可。
2、減少內(nèi)存消耗，提高了頁(yè)面性能，這主要還是減少了事件處理函數(shù)的數(shù)量
3、動(dòng)態(tài)綁定事件，比如我們需要增加一個(gè)元素，那么我們還需要重新給這個(gè)元素綁定事件，但是用事件委托就沒(méi)關(guān)系了，因?yàn)槭录?不是 綁定在目標(biāo)元素上的，而是綁定在已經(jīng)存在于頁(yè)面上的父元素，冒泡到父元素上時(shí)，執(zhí)行綁定在父元素上的事件處理函數(shù)，這樣能減少很多不必要的工作。
事件委托 的局限focus、blur 之類(lèi)的事件本身沒(méi)有事件冒泡機(jī)制，所以無(wú)法委托；
mousemove、mouseout 這樣的事件，雖然有事件冒泡，但是每次都要計(jì)算它的位置，對(duì)性能消耗高，而且很麻煩，因此也是不適合用事件委托。
這篇文章是比較基礎(chǔ)的，還有一些東西沒(méi)有說(shuō)，比如文中說(shuō) 事件委托的實(shí)現(xiàn) 的時(shí)候，舉的例子比較簡(jiǎn)單，監(jiān)聽(tīng)的 li 里面沒(méi)有子元素，如果存在子元素時(shí)，那點(diǎn)擊子元素 又會(huì)有什么問(wèn)題呢？ 還有 JQuery中的事件委托 又是怎么做的呢？ 看這里
簡(jiǎn)單說(shuō) JavaScript中的事件委托（下）
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/112929.html
摘要：說(shuō)明這篇文章說(shuō)中的事件委托，這次先說(shuō)一些比較基本的知識(shí)。第一段綁定了兩次事件，第二段綁定了一次事件也就是說(shuō)，原來(lái)在上綁定的事件，現(xiàn)在委托在了父元素上，而在上只需要綁定一次就可以了。我們用事件委托的方式，再來(lái)改改。 說(shuō)明 這篇文章說(shuō)JavaScript中的事件委托，這次先說(shuō)一些比較基本的知識(shí)。 事件委托 是什么 先來(lái)看看事件委托的概念 事件委托就是利用事件冒泡，只指定一個(gè)事件處理程序，就...
摘要：說(shuō)明上次我們說(shuō)了一些，關(guān)于中事件委托的基礎(chǔ)知識(shí)，這次我們繼續(xù)來(lái)看?？蛇x類(lèi)型，一個(gè)選擇器，用于指定哪些后代元素可以觸發(fā)綁定的事件。類(lèi)型，指定的事件處理函數(shù)。 說(shuō)明 上次我們說(shuō)了一些，關(guān)于 JavaScript中事件委托的 基礎(chǔ)知識(shí)，這次我們繼續(xù)來(lái)看。 解釋 先來(lái)一段代碼 1 2 ul.onclick...
摘要：說(shuō)明上次我們說(shuō)了一些，關(guān)于中事件委托的基礎(chǔ)知識(shí)，這次我們繼續(xù)來(lái)看?？蛇x類(lèi)型，一個(gè)選擇器，用于指定哪些后代元素可以觸發(fā)綁定的事件。類(lèi)型，指定的事件處理函數(shù)。 說(shuō)明 上次我們說(shuō)了一些，關(guān)于 JavaScript中事件委托的 基礎(chǔ)知識(shí)，這次我們繼續(xù)來(lái)看。 解釋 先來(lái)一段代碼 1 2 ul.onclick...
閱讀 2719·2021-09-13 10:26
閱讀 1990·2021-09-03 10:28
閱讀 2051·2019-08-30 15:44
閱讀 868·2019-08-29 14:07
閱讀 454·2019-08-29 13:12
閱讀 2205·2019-08-26 11:44
閱讀 2395·2019-08-26 11:36
閱讀 2063·2019-08-26 10:19
