具有多个事件处理程序和多个选择器的 jQuery .on() 方法答案

【问题标题】：jQuery .on() method with multiple event handlers & multiple selectors具有多个事件处理程序和多个选择器的 jQuery .on() 方法
【发布时间】：2017-01-17 10:21:49
【问题描述】：

所以我知道我们可以在 .on() 方法上有多个事件处理程序

$(document).on({
    'click': function (e) {
       // function
    },
    'hover': function (e) {
       // function    
    }
});

但是我们是否可以为每个事件处理程序添加多个选择器？

像这样：

$(document).on('click', '#foo, .foo', function () { 
     // function
});

但有多个 .on() 方法：

$(document).on({
    'click', '#foo': function (e) {
       // doesn't work :(
    },
    'hover', '.foo': function (e) {
       // doesn't work :(    
    }
});

提前致谢

【问题讨论】：

那不是一个有效的对象 :)
所以没有办法做到这一点？
如果每个事件都有不同的选择器，为什么不将它们拆分成自己的 on - 这样会更易于维护
使用多个on() 方法，或者如果您需要通用选择器，则使用选择器作为第二个参数

标签： jquery events event-handling jquery-selectors

【解决方案1】：

如果你想在不同的事件上使用不同的匹配元素，你需要使用不同的on 调用。您可以使用单个 on 调用来挂钩 same 元素的多个事件，但不能使用单个 on 来混合和匹配事件和选择器（也没有任何需要）。

当然，您可以创建自己的函数来执行此操作。例如，隐约类似于：

$.fn.mixon = function(events) {
    Object.keys(events).forEach(function(selector) {
        var entry = events[selector];
        Object.keys(entry).forEach(function(event) {
            this.on(event, selector, entry[event]);
        }, this);
    }, this);
    return this;
};

...你可以这样使用：

$(document).mixon({
    "#foo": {
        "click focus": function() {
           // ...
        }
    },
    ".foo": {
        click: function() {
           // ...
        }
    }
});

【讨论】：