$（document）.onを使って複数のイベントを同じ要素にバインドする

Question

jQueryで新しいやり方をするのに慣れようとしていますが、 "ライブ"バインディングの方法を理解できませんそれはオリジナルと同じようにエレガント/ドライです。以前は、と、私はあなたがこれを行うことができます信じている「生きる」一度だけの要素に言及：

$("#element_id").live("click",function(){ 
    //stuff 
}).live("mouseover", function(){ 
    //stuff 
}).live("mouseout", function(){ 
    //stuff 
}); 

さて、$(document).onで私がこれを行う必要があるだろうと思われる：

$(document).on("click","#element_id",function(){ 
    //stuff 
}).on("mouseover","#element_id",function(){ 
    //stuff 
}).on("mouseout","#element_id",function(){ 
    //stuff 
}); 

これはあまり簡潔で要素を繰り返す。これを達成するための明らかに簡単な方法はありますか？

Answer 1

$(document).on({ 
    click: function() {}, 
    mouseover: function() {}, 
    mouseout: function() {} 
}, '#element_id'); 

document注意してください。より具体的なセレクタを使用することができます。また、ID要素を動的に読み込むのが悪い習慣であるとは必ずしも言えませんが、疑わしいと思われます。

Answer 2

あなたのコールバックがコードを共有する必要がある場合、私は、このアプローチは便利：

var handler = function (event) { 

    var $target = $(event.target); 

    if ($target.is('#element_id')) } 

     switch (event.type) { 
      case 'click': 
       // stuff 
      break; 
      case 'mouseenter': 
       // stuff 
      break; 
      case 'mouseleve': 
       // stuff 
      break; 
     } 

    } 

}; 

$(document).on({ 
    click: handler, 
    mouseenter: handler, 
    mouseleave: handler, 
});