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