聊一聊事件委托

URLOS 發(fā)布于2019-08-26 11:38 / 991人閱讀

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

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

事件委托，顧名思義就是講子元素事件委托給上級元素
（這是寫上級元素，包含document根元素，因為不局限于它的父元素）

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

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

很不幸，基于業(yè)務(wù)的復雜性，必須要將改事件抽出來，注冊到全局（因為要做多一層緩存）

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

說一下為什么要這樣做：

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

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

這里就要加一個緩存給它，設(shè)兩個變量，分別保存使用和未使用的，
點擊它的時候，只要對應(yīng)的變量不為空，就直接渲染，為空就去請求
    var willData, doneData, state;
function session(){
    //state是用來判斷點擊的是已使用還是未使用的，忽略即可
  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ù)體注冊的事件）就會發(fā)現(xiàn)一個很奇怪的問題

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

})

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