Question

想知道使用jquery“on”...

命名多个事件的正确方法是什么

例如：

$(".parent-selector").on({
"mouseenter.namespace": function() {
    // mouseenter event
},
"mouseleave.namespace": function() {
    // mouseleave event
}
}, ".selector");

这不起作用......如果我删除“.namespace”它确实有效。

使用工作命名空间的jquery示例：

$(".parent-selector").on("mouseenter.namespace", ".selector", function() { });

我知道我可以分别执行mouseenter / mouseleave事件......只是好奇是否有办法通过对象传递命名空间

谢谢！

Answer 1

要附加到多个事件，您必须传递一个以空格分隔的事件列表：

$(".parent-selector").on("mouseenter.namespace mouseleave.namespace",
                         ".selector", function() { });

修改

您总是可以在回调中获取事件类型并调用其他函数：

$(".parent-selector").on("mouseenter.namespace mouseleave.namespace", ".selector", function(e) { if (e.type == "mouseenter.namespace") { myMouseEnter(e); } else if (e.type == "mouseleave.namespace") { myMouseLeave(e); } });

通过它似乎工作，我无法确认，因为我不在我的机器上。试一试。

Answer 2

下面的代码实际上是正确的 - 我之前在代码中遇到了命名空间冲突的问题。

$(".parent-selector").on({
    "mouseenter.namespace": function() {
        // mouseenter event
    },
    "mouseleave.namespace": function() {
        // mouseleave event
    }
}, ".selector");

Answer 3

根据您在评论中所说的内容，您希望为每个命名空间触发不同的函数。似乎很奇怪，你会把它们结合起来，想要做一些与众不同的事情。但是，如果您想知道触发事件的原因，可以使用event.type。

$("#foo").on("mouseover mouseout", ".bar",
    function(evt){
       console.log(evt.type); 
    }
);

JSFiddle

使用jquery“on”命名多个事件的命名空间

3 个答案: