javascript - 一次调用即可绑定(bind)多个类的点击事件

Question

在页面加载时，我将许多click事件绑定(bind)到不同的对象，代码如下所示:

$(document).on('click', '.class1', function() { ... });
$(document).on('click', '.class2', function() { ... });
$(document).on('click', '.class3', function() { ... });
...

我发现它看起来很困惑。我知道使用 jQuery 可以在一个 DOM 元素上绑定(bind)多个不同的事件:

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

可以以类似的方式对多个类完成此操作吗？像这样的事情:

$(document).on('click', {
    '.class1': func1,
    '.class2': func2,
    '.class3': func3,
    ...
});

请注意，func1、func2、func3等实现不同的逻辑，不能组合。

Answer 1

jQuery 不支持该语法。您可以通过迭代对象来绑定(bind)事件处理程序:

var handlers = {
  '.class1': function() { ... },
  '.class2': function() { ... },
  '.class3': function() { ... },
};

Object.keys(handlers).forEach(function(sel) {
    $(document).on('click', sel, handlers[sel]);
});

您还可以定义实用函数:

/**
 * A utility function for mass event delegation
 * @param  {String|Object} parent - the target of event delegation
 * @param  {String} event - event name
 * @param  {PlainObject} handlers
 * @return {undefined}
 */
$.delegate = function(parent, event, handlers) {
  parent = $(parent);
  Object.keys(handlers).forEach(function(sel) {
    parent.on(event, sel, handlers[sel]);
  });
}

$.delegate(document, 'click', {
  '.class1': function() { ... },
  '.class2': function() { ... },
  '.class3': function() { ... },
});