国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

簡單說 JavaScript中的事件委托（上）

SexySix / 1816人閱讀

摘要：說明這篇文章說中的事件委托，這次先說一些比較基本的知識。第一段綁定了兩次事件，第二段綁定了一次事件也就是說，原來在上綁定的事件，現(xiàn)在委托在了父元素上，而在上只需要綁定一次就可以了。我們用事件委托的方式，再來改改。

說明

這篇文章說JavaScript中的事件委托，這次先說一些比較基本的知識。

事件委托 是什么

先來看看事件委托的概念

事件委托就是利用事件冒泡，只指定一個(gè)事件處理程序，就可以管理某一類型的所有事件。

事件委托，你叫他 事件代理 也可以，都是一個(gè)意思。
事件：JavaScript 偵測到的行為就是事件，比如鼠標(biāo)點(diǎn)擊、某個(gè)鍵盤的鍵被按下、元素獲得焦點(diǎn)。
委托：就是把原來自己做的事，交給別人做。

事件委托 的原理

要說事件委托的原理，我們應(yīng)該先明白事件冒泡

事件冒泡：從目標(biāo)元素出發(fā)，向外層元素冒泡，最后到達(dá)頂層（window或document），依次執(zhí)行綁定在其上的事件。

我們來看段代碼

效果圖

從上面的圖中我們看見，當(dāng)點(diǎn)擊 藍(lán)色 p 元素時(shí)，先觸發(fā)了 p 元素上綁定的事件，然后又觸發(fā)了 紅色 div 元素上綁定的事件，這就是事件冒泡了。

事件委托 的實(shí)現(xiàn)

先來段代碼



 
 
 
    
    
        
  • 1
    • 
        
  • 2
    •

我們用事件委托的方式改寫一下上面的代碼，不過在這之前，我們還要明白一下什么是 event 對象

任何事件觸發(fā)后將產(chǎn)生一個(gè)event對象
 event對象記錄事件發(fā)生時(shí)的鼠標(biāo)位置、鍵盤按鍵狀態(tài)和    觸發(fā)對象等信息
一般情況下，綁定事件處理函數(shù)時(shí)，event對象默認(rèn)以第一個(gè)參數(shù)方式傳入

event對象有許多的屬性，具體的可以到這里去看
http://www.w3school.com.cn/js...

如果用事件委托，那代碼就是這樣的



 
 
 
    
    
        
  • 1
    • 
        
  • 2
    •

上面的代碼，應(yīng)該很容易看懂的，我們看看他們的區(qū)別
1、第一段代碼是在 每個(gè) li 上綁定事件，第二段只是在 li 的父元素 ul 上綁事件。
2、第一段綁定了兩次事件，第二段綁定了一次事件

也就是說，原來在 li 上綁定的事件，現(xiàn)在委托在了父元素 ul 上，而在 ul 上只需要綁定一次就可以了。

我們再來看另一種情況，當(dāng)元素最開始不存在時(shí)，需要綁定事件，最先能想到會(huì)出現(xiàn)這種情況的場景就是，元素是通過發(fā)請求，獲取數(shù)據(jù)后，拼接到頁面上的。而這種元素如果在發(fā)請求之前就綁定事件，是不會(huì)生效的。



 
 
 
    
    
        
  • 1
    • 
        
  • 2
    •

上面這段代碼中，在元素 li3 還不存在的時(shí)候就綁定事件了，所以執(zhí)行代碼后就會(huì)報(bào)錯(cuò)

解決這個(gè)問題最直接的辦法就是等元素添加到頁面上之后，再綁定事件，我們來改改代碼。



 
 
 
    
    
        
  • 1
    • 
        
  • 2
    •

改成這樣后，綁定事件就可以起作用了，但是這樣如果元素改變多次，就要元素渲染一次，就綁定一次事件，顯然是有點(diǎn)麻煩了。

我們用事件委托的方式，再來改改。



 
 
 
    
    
        
  • 1
    • 
        
  • 2
    •

上面這段代碼，我們用事件委托的方式，并不在生成的元素上綁定事件，而是在生成元素的父元素上綁定事件，因?yàn)楦冈厥且恢贝嬖诘模越壎ǖ氖录涂梢陨А?/p> 事件委托 的好處

1、減少了事件監(jiān)聽器，原來需要在多個(gè)子元素綁定相同的事件處理函數(shù)，現(xiàn)在只需要在祖先元素（一般為父元素）上統(tǒng)一定義一次即可。

2、減少內(nèi)存消耗，提高了頁面性能，這主要還是減少了事件處理函數(shù)的數(shù)量

3、動(dòng)態(tài)綁定事件，比如我們需要增加一個(gè)元素，那么我們還需要重新給這個(gè)元素綁定事件，但是用事件委托就沒關(guān)系了，因?yàn)槭录?不是 綁定在目標(biāo)元素上的，而是綁定在已經(jīng)存在于頁面上的父元素，冒泡到父元素上時(shí)，執(zhí)行綁定在父元素上的事件處理函數(shù)，這樣能減少很多不必要的工作。

事件委托 的局限

focus、blur 之類的事件本身沒有事件冒泡機(jī)制，所以無法委托；
mousemove、mouseout 這樣的事件，雖然有事件冒泡，但是每次都要計(jì)算它的位置，對性能消耗高，而且很麻煩，因此也是不適合用事件委托。

總結(jié)

這篇文章是比較基礎(chǔ)的，還有一些東西沒有說，比如文中說 事件委托的實(shí)現(xiàn) 的時(shí)候，舉的例子比較簡單，監(jiān)聽的 li 里面沒有子元素，如果存在子元素時(shí)，那點(diǎn)擊子元素 又會(huì)有什么問題呢？ 還有 JQuery中的事件委托 又是怎么做的呢？ 看這里

簡單說 JavaScript中的事件委托（下）

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/90505.html

相關(guān)文章

  • 簡單說 JavaScript中的事件委托（上）

    摘要：說明這篇文章說中的事件委托，這次先說一些比較基本的知識。第一段綁定了兩次事件，第二段綁定了一次事件也就是說，原來在上綁定的事件，現(xiàn)在委托在了父元素上，而在上只需要綁定一次就可以了。我們用事件委托的方式，再來改改。 說明 這篇文章說JavaScript中的事件委托，這次先說一些比較基本的知識。 事件委托 是什么 先來看看事件委托的概念 事件委托就是利用事件冒泡，只指定一個(gè)事件處理程序，就...

    fireflow 評論0 收藏0

  • 簡單說 JavaScript中的事件委托(下)

    摘要：說明上次我們說了一些，關(guān)于中事件委托的基礎(chǔ)知識，這次我們繼續(xù)來看。可選類型，一個(gè)選擇器，用于指定哪些后代元素可以觸發(fā)綁定的事件。類型，指定的事件處理函數(shù)。 說明 上次我們說了一些，關(guān)于 JavaScript中事件委托的 基礎(chǔ)知識，這次我們繼續(xù)來看。 解釋 先來一段代碼 1 2 ul.onclick...

    MasonEast 評論0 收藏0

  • 簡單說 JavaScript中的事件委托(下)

    摘要：說明上次我們說了一些，關(guān)于中事件委托的基礎(chǔ)知識，這次我們繼續(xù)來看。可選類型，一個(gè)選擇器，用于指定哪些后代元素可以觸發(fā)綁定的事件。類型，指定的事件處理函數(shù)。 說明 上次我們說了一些，關(guān)于 JavaScript中事件委托的 基礎(chǔ)知識，這次我們繼續(xù)來看。 解釋 先來一段代碼 1 2 ul.onclick...

    lavnFan 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<