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

資訊專欄INFORMATION COLUMN

聊一聊事件委托

URLOS / 997人閱讀

摘要：今天想使用點(diǎn)擊事件綁定動(dòng)態(tài)獲取的元素，但又不想將事件注冊(cè)在成功函數(shù)體內(nèi)。

今天想使用點(diǎn)擊事件綁定動(dòng)態(tài)獲取的元素，但又不想將事件注冊(cè)在post成功函數(shù)體內(nèi)。

事件委托，顧名思義就是講子元素事件委托給上級(jí)元素
（這是寫上級(jí)元素，包含document根元素，因?yàn)椴痪窒抻谒母冈兀?/pre>

先說一下為什么動(dòng)態(tài)獲取的元素直接綁定不可以：


  因?yàn)閯?dòng)態(tài)元素是后生成的，在事件注冊(cè)的時(shí)候，它還沒有生成，一般
我們是通過：
$.post(url,function(data){
    //這里拿到data，然后去插入節(jié)點(diǎn)，生成元素
    //如果我們要在這里注冊(cè)事件，當(dāng)然沒問題，直接綁定即可，
    //因?yàn)楝F(xiàn)在元素已經(jīng)生成了
})


很不幸，基于業(yè)務(wù)的復(fù)雜性，必須要將改事件抽出來(lái)，注冊(cè)到全局（因?yàn)橐龆嘁粚泳彺妫?/p>

既然要在元素未生成前，注冊(cè)事件，那么將該事件綁定給上級(jí)元素：
$(documnet).on("click","要綁定的事件元素", function(){
    // to do
})



說一下為什么要這樣做：


我在做一個(gè)優(yōu)惠券功能，優(yōu)惠券有使用和未使用的區(qū)別，那么就有這樣一個(gè)需求：
點(diǎn)擊使用：去請(qǐng)求使用的；
點(diǎn)擊未使用：去請(qǐng)求未使用的；


我不可能每點(diǎn)擊一次都去請(qǐng)求一次吧，我希望我請(qǐng)求過了的數(shù)據(jù)，就不希望它再請(qǐng)求了


這里就要加一個(gè)緩存給它，設(shè)兩個(gè)變量，分別保存使用和未使用的，
點(diǎn)擊它的時(shí)候，只要對(duì)應(yīng)的變量不為空，就直接渲染，為空就去請(qǐng)求
    var willData, doneData, state;
function session(){
    //state是用來(lái)判斷點(diǎn)擊的是已使用還是未使用的，忽略即可
  if(state == 0) {
    if(willData) {
      $("#coupon-box").append(willData)
    } else {
      $.post(url,function(){
          $("綁定事件元素").on(function(){})
      })
    }
  } else {
    if(doneData) {
      $("#coupon-box").append(doneData)
    } else {
      $.post(url,function(){
          $("綁定事件元素").on(function(){})
      })
    }
  }
}


寫完邏輯后，（如果是在post函數(shù)體注冊(cè)的事件）就會(huì)發(fā)現(xiàn)一個(gè)很奇怪的問題


當(dāng)激活緩存，去插入元素時(shí)，發(fā)現(xiàn)點(diǎn)擊事件失效了；
因?yàn)槲沂峭ㄟ^移除remove（）和append（）再插入去切換使用和未使用的，
所以已經(jīng)通過post綁定的元素，被我移除了，通過session去插入的元素并
沒有注冊(cè)點(diǎn)擊事件，當(dāng)然我們也可以在給它注冊(cè)一次，畢竟要提高代碼重用
所以這里用了事件委托：
$("上級(jí)元素").on("click","綁定元素",function(){

})



=====本文到此結(jié)束，代碼比較少，最重要的是思路，對(duì)于剛?cè)腴T的小伙伴可以看一看哈！

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/107284.html

相關(guān)文章

  • 聊一聊前端的監(jiān)控

    摘要：今天我們來(lái)聊聊前端的監(jiān)控我們?yōu)槭裁葱枰岸吮O(jiān)控為了獲取用戶行為以及跟蹤產(chǎn)品在用戶端的使用情況，并以監(jiān)控?cái)?shù)據(jù)為基礎(chǔ)，指明產(chǎn)品優(yōu)化方向前端監(jiān)控分為三類性能項(xiàng)目數(shù)據(jù)監(jiān)控異常監(jiān)控性能監(jiān)控衡量前端的性能的指標(biāo)是時(shí)間那么如何監(jiān)測(cè)時(shí)間呢，瀏覽器給我們提 今天我們來(lái)聊聊前端的監(jiān)控 我們?yōu)槭裁葱枰岸吮O(jiān)控 ？ 為了獲取用戶行為以及跟蹤產(chǎn)品在用戶端的使用情況，并以監(jiān)控?cái)?shù)據(jù)為基礎(chǔ)，指明產(chǎn)品優(yōu)化方向 前端監(jiān)控...

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

  • [聊一聊系列]聊一聊WEB前端安全那些事兒

    摘要：所以今天，就和大家一起聊一聊前端的安全那些事兒。我們就聊一聊前端工程師們需要注意的那些安全知識(shí)。殊不知，這不僅僅是違反了的標(biāo)準(zhǔn)而已，也同樣會(huì)被黑客所利用。 歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面（不僅僅是代碼）：https://segmentfault.com/blog... 隨著互聯(lián)網(wǎng)的發(fā)達(dá)，各種WEB應(yīng)用也變得越來(lái)越復(fù)雜，滿足了用戶的各種需求...

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

  • JavaScript 五十問——認(rèn)真聊一聊去抖與節(jié)流

    摘要：前言無(wú)論是面試還是在討論瀏覽器優(yōu)化過程中，都會(huì)涉及到去抖動(dòng)和節(jié)流的問題。總的來(lái)說，這二者是一種限制事件觸發(fā)頻率的方式。不同的是，節(jié)流會(huì)指定事件觸發(fā)的時(shí)間間隔而去抖動(dòng)會(huì)指定事件不觸發(fā)的時(shí)間間隔。 前言 無(wú)論是面試還是在討論瀏覽器優(yōu)化過程中，都會(huì)涉及到去抖動(dòng)和節(jié)流的問題。總的來(lái)說，這二者是一種限制事件觸發(fā)頻率的方式。不同的是，節(jié)流會(huì)指定事件觸發(fā)的時(shí)間間隔；而去抖動(dòng)會(huì)指定事件不觸發(fā)的時(shí)間間隔...

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

  • JavaScript 五十問——認(rèn)真聊一聊去抖與節(jié)流

    摘要：前言無(wú)論是面試還是在討論瀏覽器優(yōu)化過程中，都會(huì)涉及到去抖動(dòng)和節(jié)流的問題?？偟膩?lái)說，這二者是一種限制事件觸發(fā)頻率的方式。不同的是，節(jié)流會(huì)指定事件觸發(fā)的時(shí)間間隔而去抖動(dòng)會(huì)指定事件不觸發(fā)的時(shí)間間隔。 前言 無(wú)論是面試還是在討論瀏覽器優(yōu)化過程中，都會(huì)涉及到去抖動(dòng)和節(jié)流的問題?？偟膩?lái)說，這二者是一種限制事件觸發(fā)頻率的方式。不同的是，節(jié)流會(huì)指定事件觸發(fā)的時(shí)間間隔；而去抖動(dòng)會(huì)指定事件不觸發(fā)的時(shí)間間隔...

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

  • 前端性能優(yōu)化JavaScript篇

    摘要：減少作用域鏈上的查找次數(shù)。盡量少用全局變量，盡量使用局部變量。全局變量如果不手動(dòng)銷毀，會(huì)一直存在，造成全局變量污染，可能很產(chǎn)生一些意想不到的錯(cuò)誤，而局部變量運(yùn)行完成后，就被會(huì)被回收使用代替大量的內(nèi)聯(lián)樣式修改。性能優(yōu)化還需要繼續(xù)深入研究。 關(guān)于前端性能優(yōu)化的討論一直都很多，包羅的知識(shí)也很多，可以說性能優(yōu)化只有更好，沒有最好。前面我寫了一篇關(guān)于css優(yōu)化的總結(jié)文章，今天再?gòu)膉avascri...

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

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

0條評(píng)論

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