如何用jquery优雅的给dom绑定监听事件？

Question

举个例子

$('.j_submitForm').on('click', function() {
    // XXX
});
$('.j_buyBtn').on('click', function() {
    // XXX
});
$('.j_callTopbar').on('click', function() {
    // XXX
});
$('.j_closeDialog').on('click', function() {
    // XXX
});
.......

当绑定事件多了之后就成这样了，不易于理解与维护，有什么优雅的方法去对dom进行事件绑定，便于管理，有没有事件绑定管理器之类的方案。
我也在寻找最佳方案，找到了及时更新

Answer 1

问题的本质在于匿名函数用来绑一个事件是简洁，绑多个事件就是混乱了

(function($view, $) {
  //所有事件放在一起，类似路由表
  $view
    .on('click', '.j_submitForm', submit)
    .on('click', '.j_buyBtn', buy)
    .on('click', '.j_callTopbar', call)
    .on('click', '.j_closeDialog', closeDialog);

  //处理事件的逻辑分离开单独写
  function submit() {
    //todo
  }
  function buy() {
    //todo
  }
  function call() {
    //todo
  }
  function closeDialog() {
    //todo
  }
})(jQuery(document.body), jQuery)

经典老答案了 => https://segmentfault.com/q/1010000000633373/a-1020000000633785

Answer 2

$("body").on("click", ".j_submitForm", function(){

}).on("click", ".j_buyBtn", function(){

}).on("click", ".j_callTopbar", function(){

}).on("click", ".j_closeDialog", function(){

})

其实没什么办法, jq就这样, 很难维护, 重要的还是得模块化. 你要把全站的js都写一个文件肯定难维护

Answer 3

$('.j_submitForm').on('click.myPluginA.a1', function() {
    // 1   .myPluginA.a1
});
 $('.j_submitForm').on('click.myPluginA.a2', function() {
    // 2   .myPluginA.a2
});
$('.j_buyBtn').on('click.myPluginB.b1', function() {
    // 3   .myPluginB.b1
});
 $('.j_buyBtn').on('click.myPluginB.b2', function() {
    // 4   .myPluginB.b2
});

$(document).off('.myPluginA'); // 解除 myPluginA 命名空间的绑定事件 (包括1,2)
$(document).off('.myPluginB.b1'); // 解除 myPluginB.b1 命名空间的绑定事件(只有3)