聊一聊事件委託

今天想使用點擊事件綁定動態獲取的元素，但又不想將事件註冊在post成功函數體內。

事件委託，顧名思義就是講子元素事件委託給上級元素
（這是寫上級元素，包含document根元素，由於不侷限於它的父元素）

先說一下爲何動態獲取的元素直接綁定不能夠：

由於動態元素是後生成的，在事件註冊的時候，它尚未生成，通常
咱們是經過：
$.post(url,function(data){
    //這裏拿到data，而後去插入節點，生成元素
    //若是咱們要在這裏註冊事件，固然沒問題，直接綁定便可，
    //由於如今元素已經生成了
})

很不幸，基於業務的複雜性，必需要將改事件抽出來，註冊到全局（由於要作多一層緩存）

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

說一下爲何要這樣作：

我在作一個優惠券功能，優惠券有使用和未使用的區別，那麼就有這樣一個需求：
點擊使用：去請求使用的；
點擊未使用：去請求未使用的；

我不可能每點擊一次都去請求一次吧，我但願我請求過了的數據，就不但願它再請求了

這裏就要加一個緩存給它，設兩個變量，分別保存使用和未使用的，
點擊它的時候，只要對應的變量不爲空，就直接渲染，爲空就去請求
    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函數體註冊的事件）就會發現一個很奇怪的問題

當激活緩存，去插入元素時，發現點擊事件失效了；
由於我是經過移除remove（）和append（）再插入去切換使用和未使用的，
因此已經經過post綁定的元素，被我移除了，經過session去插入的元素並
沒有註冊點擊事件，固然咱們也能夠在給它註冊一次，畢竟要提升代碼重用
因此這裏用了事件委託：
$('上級元素').on('click','綁定元素',function(){

})

=====本文到此結束，代碼比較少，最重要的是思路，對於剛入門的小夥伴能夠看一看哈！