成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

淺談Javascript事件委托（代理）

yunhao / 2567人閱讀

摘要：開(kāi)玩笑啦，提供一種方法叫做事件委托。途中經(jīng)過(guò)各個(gè)層次的，并在各上觸發(fā)捕獲事件，直到到達(dá)時(shí)間的目標(biāo)。懂得了事件冒泡的過(guò)程，就很容易明白事件委托的運(yùn)作原理。

首先祝大家七夕快樂(lè)。。
假如現(xiàn)在有一個(gè)的列表，里面可能會(huì)有若干個(gè)列表項(xiàng)。現(xiàn)在要為每一個(gè)列表項(xiàng)綁定相同的點(diǎn)擊事件，現(xiàn)在你可能會(huì)有這幾種做法：

手動(dòng)為每一個(gè)列表項(xiàng)綁定事件；

在onload的時(shí)候，找到該列表，對(duì)其每一個(gè)子元素進(jìn)行遍歷，循環(huán)綁定事件；

給每一個(gè)列表項(xiàng)相同的類(lèi)名，一次性對(duì)其進(jìn)行綁定。

方法1： 對(duì)于5個(gè)以?xún)?nèi)的列表項(xiàng)還好，如果列表有很多，比如100+，那么這種方法很不現(xiàn)實(shí)，代碼會(huì)非常多，而且難以維護(hù)。
方法2： 代碼量看上去應(yīng)該不多，但是同樣會(huì)難以維護(hù)，如果是動(dòng)態(tài)生成的列表項(xiàng)，很有可能會(huì)出現(xiàn)問(wèn)題。最重要的，如果有大量列表項(xiàng)，性能會(huì)變得十分糟糕。
方法3： 原生JS不能直接選擇class就不說(shuō)了，即使通過(guò)匹配className的方法進(jìn)行綁定，其性能只會(huì)比方法2還要差。

綜上所述，JS完了（誤）。

開(kāi)玩笑啦，js提供一種方法叫做**事件委托**。

在講事件委托之前，我們不妨先了解一下事件的三個(gè)階段（對(duì)事件冒泡有所了解的可跳過(guò)此段）：

捕獲階段——眾里尋他千百度：
事件從文檔根節(jié)點(diǎn)出發(fā)，隨著DOM結(jié)構(gòu)向事件的目標(biāo)節(jié)點(diǎn)尋找。途中經(jīng)過(guò)各個(gè)層次的DOM node，并在各node上觸發(fā)捕獲事件，直到到達(dá)時(shí)間的目標(biāo)node。

目標(biāo)階段——終于等到你，還好我沒(méi)放棄：
事件到達(dá)目標(biāo)node，在目標(biāo)node上被觸發(fā)。

冒泡階段——山谷回音：
事件在目標(biāo)node上觸發(fā)后，將由DOM樹(shù)一層層向上冒泡，依次觸發(fā)，直到到達(dá)最外層的根節(jié)點(diǎn)。這是時(shí)間委托所利用的特點(diǎn)。

請(qǐng)?jiān)徫矣眠@么文藝的方式給大家講述事件觸發(fā)的故事。O(∩_∩)O

懂得了事件冒泡的過(guò)程，就很容易明白事件委托的運(yùn)作原理。當(dāng)列表項(xiàng)的事件冒泡到父元素（即列表元素）時(shí)，可以查看事件對(duì)象的target屬性，catch真正被點(diǎn)擊的節(jié)點(diǎn)元素。下面是一段簡(jiǎn)單代碼展示了這個(gè)過(guò)程：

     
   document.getElementById("list").addEventListener("click",function(e) {
        if(e.target && e.target.nodeName == "LI") {
            //TO DO SOMETHING
        }
    });



解釋一下代碼： 獲得父級(jí)元素list，為其綁定點(diǎn)擊事件：如果子元素（列表項(xiàng)）被點(diǎn)擊，當(dāng)事件冒泡到list時(shí)，判斷目標(biāo)節(jié)點(diǎn)（事件來(lái)源）是否為li元素，如果是則觸發(fā)該事件。
日常的例子： 假如你是一位小學(xué)班主任，你制定了一個(gè)規(guī)則：如果班里有人早戀就必須受到懲罰（定義了事件觸發(fā)后執(zhí)行的函數(shù)）。但是學(xué)生的活動(dòng)范圍是整個(gè)學(xué)校而不是局限于一個(gè)班，所以你就天天在學(xué)校里溜達(dá)（將事件綁定到父級(jí)元素）。突然看到有學(xué)生在接吻（事件句柄），你需要判斷這個(gè)學(xué)生是不是自己班里的，如果是，請(qǐng)暴揍他一頓（觸發(fā)事件，他還是個(gè)孩子，請(qǐng)不要放過(guò)他）。

當(dāng)然，在真正的實(shí)際應(yīng)用中也許沒(méi)有這么簡(jiǎn)單，你也許只需要其中部分子元素綁定事件；也許還要考慮瀏覽器兼容的問(wèn)題（在IE里目標(biāo)元素放在srcElement屬性中而不是target中，所以最好把獲得目標(biāo)元素寫(xiě)成一個(gè)跨瀏覽器的函數(shù)）。不過(guò)無(wú)論如何，你不需要為不確定的DOM而經(jīng)常改變你的綁定，更不會(huì)因?yàn)檫^(guò)多的綁定導(dǎo)致性能的降低，大大降低崩潰的風(fēng)險(xiǎn)。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/85911.html

相關(guān)文章

  • 淺談事件委托機(jī)制

    摘要：所謂的事件委托，簡(jiǎn)單的來(lái)說(shuō)就是將一個(gè)元素響應(yīng)事件委托給另外一個(gè)元素。而正好瀏覽器當(dāng)中有事件冒泡機(jī)制，一張圖簡(jiǎn)單了解下瀏覽器的事件響應(yīng)機(jī)制。 適用場(chǎng)景 在日常開(kāi)發(fā)過(guò)程中，我們經(jīng)常會(huì)遇到這樣一種場(chǎng)景：我需要通過(guò)ajax從后端獲取數(shù)據(jù)后動(dòng)態(tài)添加dom節(jié)點(diǎn)來(lái)展示數(shù)據(jù)，并且這些dom節(jié)點(diǎn)有時(shí)候又需要是可交互的，例如點(diǎn)擊事件。那么在我們獲取到數(shù)據(jù)之前這些dom節(jié)點(diǎn)是不存在的，也就是說(shuō)我們沒(méi)辦法在獲...

    WelliJhon 評(píng)論0 收藏0

  • 淺談網(wǎng)頁(yè)基本性能優(yōu)化規(guī)則小結(jié)

    摘要：雪碧圖內(nèi)聯(lián)圖片將站內(nèi)小圖標(biāo)合并成一張圖，使用定位截取對(duì)應(yīng)圖標(biāo)適當(dāng)使用內(nèi)聯(lián)圖片。瀏覽器緩存合理設(shè)置瀏覽器緩存是網(wǎng)頁(yè)優(yōu)化的重要手段之一。為什么要減少請(qǐng)求在性能優(yōu)化中減少請(qǐng)求的措施占了很大部分，比如使用雪碧 這篇文章主要介紹了淺談網(wǎng)頁(yè)基本性能優(yōu)化規(guī)則小結(jié)的相關(guān)資料，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧 針對(duì)瀏覽器網(wǎng)頁(yè)的一些優(yōu)化規(guī)則 頁(yè)面優(yōu)化 靜態(tài)資源壓縮...

    Aomine 評(píng)論0 收藏0

  • 淺談網(wǎng)頁(yè)基本性能優(yōu)化規(guī)則小結(jié)

    摘要：雪碧圖內(nèi)聯(lián)圖片將站內(nèi)小圖標(biāo)合并成一張圖，使用定位截取對(duì)應(yīng)圖標(biāo)適當(dāng)使用內(nèi)聯(lián)圖片。瀏覽器緩存合理設(shè)置瀏覽器緩存是網(wǎng)頁(yè)優(yōu)化的重要手段之一。為什么要減少請(qǐng)求在性能優(yōu)化中減少請(qǐng)求的措施占了很大部分，比如使用雪碧 這篇文章主要介紹了淺談網(wǎng)頁(yè)基本性能優(yōu)化規(guī)則小結(jié)的相關(guān)資料，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧 針對(duì)瀏覽器網(wǎng)頁(yè)的一些優(yōu)化規(guī)則 頁(yè)面優(yōu)化 靜態(tài)資源壓縮...

    luffyZh 評(píng)論0 收藏0

  • 淺談網(wǎng)頁(yè)基本性能優(yōu)化規(guī)則小結(jié)

    摘要：雪碧圖內(nèi)聯(lián)圖片將站內(nèi)小圖標(biāo)合并成一張圖，使用定位截取對(duì)應(yīng)圖標(biāo)適當(dāng)使用內(nèi)聯(lián)圖片。瀏覽器緩存合理設(shè)置瀏覽器緩存是網(wǎng)頁(yè)優(yōu)化的重要手段之一。為什么要減少請(qǐng)求在性能優(yōu)化中減少請(qǐng)求的措施占了很大部分，比如使用雪碧 這篇文章主要介紹了淺談網(wǎng)頁(yè)基本性能優(yōu)化規(guī)則小結(jié)的相關(guān)資料，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧 針對(duì)瀏覽器網(wǎng)頁(yè)的一些優(yōu)化規(guī)則 頁(yè)面優(yōu)化 靜態(tài)資源壓縮...

    CoderStudy 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

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