javascript - 使用 $(document).on 将多个事件绑定到同一个元素

Question

我正在尝试习惯 jQuery 中新的正确做事方式，但我不知道如何进行与原始绑定一样优雅/干燥的“实时”绑定。以前，使用“live”我相信你可以做到这一点，只提到一次元素：

$("#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,
});