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

資訊專欄INFORMATION COLUMN

jquery .bind() vs .live() vs .delegate() vs .on()

baukh789 / 1580人閱讀

摘要：但是當(dāng)我們點(diǎn)擊新添加的元素也就是時，卻沒有把這個加給它。它的原理是利用事件冒泡最終代理給最頂層的。對于動態(tài)生成的元素也生效因?yàn)槠鋵?shí)是綁定在上的。

假設(shè)我們有這樣一段html：

    
    
  • book 1
    • 
    
  • book 2
    •

1: .bind()
.bind方法的用法是這樣的：targetElment.bind("eventType", eventHandler)
所以假入我們要給

  • 元素綁定一個click事件，那就這樣寫：

    $(document).ready(function(){
    $(".bookList li").bind("click", function(event){
        $(this).addClass("red");
    })
    
    $("button").bind("click", function(event){
        $(".bookList").append("
  • book 3
    • ");

    })
})

    最開始只有兩個

  • 元素，點(diǎn)擊
  • 的時候會往當(dāng)前被點(diǎn)擊的
  • 上面添加一個名為‘red’的class。通過點(diǎn)擊‘a(chǎn)dd a li’這個button, 添加一個新的
  • 元素。但是當(dāng)我們點(diǎn)擊新添加的
  • 元素（也就是"book 3"）時，卻沒有把"red"這個class加給它。所以可以看到bind()有的缺點(diǎn)是：

    1: 對于動態(tài)添加的元素不會綁定事件
2: 它會給每一個滿足條件的dom元素都綁定這個eventHandler
3: 它會帶來性能問題
4: 對應(yīng)解綁方法為：.unbind()

    2: .live()
    .live方法的用法是這樣的：targetElment.live("eventType", eventHandler)
    live()的寫法和bind是一樣，但是它們的功能和實(shí)現(xiàn)原理卻不一樣，不同點(diǎn)有：

    1: live()把eventHandler綁定在document上，而不是某個特定的元素節(jié)點(diǎn)上。它的原理是利用事件冒泡最終代理給最頂層的document。
2: 對于動態(tài)生成的元素也生效（因?yàn)閑ventHandler其實(shí)是綁定在document上的）。
3: jQuery 1.7之后live()就被廢棄了，用.on()替代
4: 對應(yīng)的解綁方法為 .die()

    3: .delegate()
    .delegate方法的用法是這樣的：delegatedObject.delegate("targetElment","eventType", eventHandler)
    比方說仍然針對我們開頭的那段代碼，我們把對

  • 的點(diǎn)擊事件，委托給它的父節(jié)點(diǎn)
      :

      $(".bookList").delegate(".bookList li","click", function(event){
        $(this).addClass("red");
 })

      .delegate()和live()都用了事件的委托，不用之處在于：

      1: delegate()可以自己選擇委托給特定的元素，而不是只能是document
2: jQuery 1.7之后.delegate()也被廢棄了，要用.on()替換
3: 對應(yīng)的解綁方法為 .undelegate()

      4: .on()
      .on()的語法：delegateObject.on("eventType", "targetElement", eventHandler)
      jQuery 1.7之后，上面的三個方法都被on取而代之，而用on的不同寫法就可以達(dá)到跟它們相同的效果：

      // Bind
$( ".bookList li" ).bind( "click", function( e ) {} ); 
$( ".bookList li" ).on( "click", function( e ) {} ); 

// Live
$( ".bookList li" ).live( "click", function( e ) {} );
$( document ).on( "click", ".bookList li", function( e ) {} ); 

// Delegate
$( "#bookList" ).delegate( "li", "click", function( e ) {} );
$( ".bookList" ).on( "click", "li", function( e ) {} );

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

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

    相關(guān)文章

    • [譯] Jquery中 .bind() .live() .delegate() 和 .on() 之間

      摘要：方法將事件類型和一個事件處理函數(shù)直接注冊到了被選中的元素中。方法將與事件處理函數(shù)關(guān)聯(lián)的選擇器和事件信息一起附加到文檔的根級元素即。通過將事件信息注冊到上，這個事件處理函數(shù)將允許所有冒泡到的事件調(diào)用它例如委托型傳播型事件。 簡介 我了解到很多網(wǎng)頁開發(fā)者對jquery中的 .bind() .live() .delegate() 和 .on() 方法存在很多的疑惑。這些疑惑通常是關(guān)于它們之間...

      terasum 評論0 收藏0

    • jquery 給動態(tài)添加元素 實(shí)現(xiàn)點(diǎn)擊事件

      摘要：方法用到了事件委托的概念來處理事件的綁定?？梢杂迷趧討B(tài)添加的元素上缺點(diǎn)需要查找那個那個元素上發(fā)生了那個事件了，盡管比少很多了，不過，你還是得浪費(fèi)時間來查找。 當(dāng)我們試圖綁定一些事件到DOM元素上的時候，通常會使用以下的四個方法bind(),on(),live(),delegate()大家應(yīng)該用的較多的是前兩種方法。下面是我對四種方法的理解： Bind()： .bind()是最直接的綁定...

      DataPipeline 評論0 收藏0

    • 深入理解JQuery中的on方法（事件委派機(jī)制）

      摘要：它是一個過濾器的作用，只有被選中元素的后代元素才會觸發(fā)事件。替換是引入的，目的是通過祖先元素來代理委派后代元素的事件綁定問題，某種程度上和優(yōu)點(diǎn)相似。相關(guān)資料深入理解新的綁定事件機(jī)制方法的使用新的事件綁定機(jī)制 前言 在開發(fā)項(xiàng)目的時候，JQuery的使用極其廣泛，如果腦海中沒有一點(diǎn)JQuery的基礎(chǔ)知識，隨性編寫，那么就有可能造成bug問題。JQuery 1.4版本之后新增了on方法，這個...

      ckllj 評論0 收藏0

    • 深入理解JQuery中的on方法（事件委派機(jī)制）

      摘要：它是一個過濾器的作用，只有被選中元素的后代元素才會觸發(fā)事件。替換是引入的，目的是通過祖先元素來代理委派后代元素的事件綁定問題，某種程度上和優(yōu)點(diǎn)相似。相關(guān)資料深入理解新的綁定事件機(jī)制方法的使用新的事件綁定機(jī)制 前言 在開發(fā)項(xiàng)目的時候，JQuery的使用極其廣泛，如果腦海中沒有一點(diǎn)JQuery的基礎(chǔ)知識，隨性編寫，那么就有可能造成bug問題。JQuery 1.4版本之后新增了on方法，這個...

      jindong 評論0 收藏0

    • 深入理解JQuery中的on方法（事件委派機(jī)制）

      摘要：它是一個過濾器的作用，只有被選中元素的后代元素才會觸發(fā)事件。替換是引入的，目的是通過祖先元素來代理委派后代元素的事件綁定問題，某種程度上和優(yōu)點(diǎn)相似。相關(guān)資料深入理解新的綁定事件機(jī)制方法的使用新的事件綁定機(jī)制 前言 在開發(fā)項(xiàng)目的時候，JQuery的使用極其廣泛，如果腦海中沒有一點(diǎn)JQuery的基礎(chǔ)知識，隨性編寫，那么就有可能造成bug問題。JQuery 1.4版本之后新增了on方法，這個...

      ralap 評論0 收藏0

    發(fā)表評論

    0條評論

    baukh789

    男|高級講師

    TA的文章

    閱讀更多
    最新活動
    閱讀需要支付1元查看
    <