Question

有没有办法在jQuery中结合使用这两种处理事件附件的方法？

$('selector').on({
    mouseenter: function() {},
    mouseleave: function() {},
    mousedown:  function() {},
    mouseup:    function() {}
});

我更喜欢上一个方法，但是需要类似下面的方法来处理“live”事件（问题是如果处理程序之间有注释，这将不起作用）：

$(document).on('mouseenter', 'selector1', function(){})
           .on('mouseleave', 'selector2', function(){})
           .on('mousedown',  'selector3', function(){})
           .on('mouseup',    'selector4', function(){});

但是，是否有解决方法可以这样做？：

$(document).on({
    mouseenter: 'selector1': function() {},
    mouseleave: 'selector2': function() {},
    mousedown:  'selector3': function() {},
    mouseup:    'selector4': function() {}
});

更新

我最终得到了这个简单的on - 包装函数：https://gist.github.com/4191657

用法非常简单：

$(document).act(
    ['mouseenter', 'selector1', function() {}],
    ['mouseleave', 'selector2', function() {}],
    ['mousedown', 'selector3', function() {}],
    ['mouseup', 'selector4', function() {}]
);

对此有何建议或改进？

Answer 1

查看.on() method的jQuery文档。当您使用在第一个示例中使用的事件映射版本时，可以将选择器作为第二个参数传递：

$(document).on({
    mouseenter: function() {},
    mouseleave: function() {},
    mousedown: function() {},
    mouseup: function() {}
}, "selector");

这假定您要为所有这些事件使用相同的选择器。如果它可能不同，您最好的选择可能是将来电链接到.on()：

$(document).on('mouseenter', 'selector1', function(){})
           .on('mouseleave', 'selector2', function(){})
           // ...etc

Answer 2

我设法改进了您的包装函数，以便在定义事件时可以使用对象而不是数组。与Meteor.js类似的方式。

// inspired by https://gist.github.com/yckart/4191657
// This code allows you to use more easy to read syntax to define events in jQuery
// Usage:
// $(document).events({
//  'click, .target-selector': function() {
//      //your function to trigger when target selector is clicked
//  }
// });

;(function($) {
    $.fn.events = function() {
        var argumentsObject = arguments[0];
        return this.each(function() {   
            for (var propertyName in argumentsObject) {
                if (argumentsObject.hasOwnProperty(propertyName)) {
                    var argumentsToPass = propertyName.split(", ");
                    argumentsToPass.push(argumentsObject[propertyName]);
                    $(this).on(argumentsToPass[0], argumentsToPass[1], argumentsToPass[2]);
                }
            }
        });
    };
})(jQuery);

一个元素上的多个jQuery事件具有不同的函数和目标选择器

2 个答案: