簡述：js事件代理的7種方法

以為buttton元素綁定單擊事件，來探討事件綁定的幾種方式：

1.最原始的方法：在button元素里面添加onclick事件,代碼如下：

<button onclick=function(){}></button>

   這種方法雖然使用簡單，但是有一個缺點就是：頁面顯示和事件處理混在一起，不符合網頁開發設計的理念。

 

2.事件監聽（addEventListener)

   獲取button元素，綁定事件監聽 .addEventListener('click',fn,[true/false]);

  注：最后一個參數表示是否使用事件捕獲，默認為false

 

3.jQuery的四種辦法

      3.1 直接綁定.click()事件，代碼如下：

 $("button") .click( function() { $("p").slideToggle(); })
  
    3.2 使用.bind()方法
    $('button').bind('click', [data], function(){});
 注：此方法可為button元素綁定一個或多個事件處理程序，以及當事件發生時運行的函數。

 3.3 事件代理的3種方法

       當一個元素的多個子元素發生click事件或者有新生成的子元素發生click事件時，可以用事件代理方法，目前用的比較多的有.live(), .delegate()和.on()方法   

 3.31 .live()為當前或未來的匹配元素添加一個或多個事件處理器        

                                $("button").live('click',  [data],  function(){})

                .live()為button元素附加一個事件處理函數，即使這個元素是以后再添加進來的

                注：.live()是通過冒泡的方式來綁定到元素上的。更適合列表類型的，綁定到document DOM節點上。和.bind()的優勢是支持動態數據。

 3.32 .delegate(ChildSelector', event, [data], fn ) 
 
 注：與.live()相比較，.delegate()
 
 3.33 .on('click', selector, [data], fn)
 .on()方法是最新1.9版本，整合了之前幾種方式的新的事件綁定方法