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

use $(document).on to bind multiple events to the same element

本文关键字：绑定 事件 元素 document on 使用      更新时间：2023-09-26

我正试图习惯jQuery中新的正确方式，但我不知道如何做一个像原来一样优雅/DRY的"实时"绑定。以前，有了"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
});

这不那么简洁，重复了元素。有没有一种明显更简单的方法来实现这一点？

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

小心使用document；您可能需要使用更具体的选择器。此外，我不一定认为动态加载ID元素是一种糟糕的做法，但这看起来很可疑。

如果回调需要共享代码，我发现这种方法很有用：

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,
});
相关文章：