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

Question

所以我知道我们可以在 .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 :(    
    }
});

提前致谢

Answer 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() {
           // ...
        }
    }
});

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

jQuery .on() method with multiple event handlers & multiple selectors

jquery

events

event-handling

jquery-selectors