鼠标事件的多种功能jQuery

Question

我正在开发jQuery插件。 为了分开我的逻辑，我做这样的事情：

$element.on({
    mouseenter: function(){
      //do something special
    }, mouseleave: function(){
      //do something else special
    }
});
//more stuffs

然后在此之上我再次使用其他功能主体执行此操作

$element.on({
    mouseenter: function(){
      //do something not special
    }, mouseleave: function(){
      //do something else not special
    }
});

jQuery如何处理呢？ 鼠标事件函数的第二个声明会否覆盖第一个？ 有时我看到两种方法都有效，但有时却不行。

Answer 1

鼠标事件函数的第二个声明会否覆盖第一个？

没有。

jQuery如何处理呢？

它按照它们附加的顺序执行事件处理程序。 从文档 （大约40％）：

绑定到元素的事件处理程序的调用顺序与其绑定的顺序相同。

因此，例如，如果您有：

var div = $("#someDiv");
div.on("click", function() { console.log("one"); });
div.on("click", function() { console.log("two"); });
div.on("click", function() { console.log("three"); });

...然后单击div将给您

one
two
three

...在控制台中。

请注意，如何找到要附加处理程序的元素并不重要。 假设您在页面上只有一个div ，它的id "someDiv" ，并且它是body的第一个子"someDiv" （只是为了使选择器易于操作）。 如果你有：

$("#someDiv").on("click", function() { console.log("one"); });
$(document.body).children().first().on("click", function() { console.log("two"); });
$("div").on("click", function() { console.log("three"); });

然后单击div，您将获得

one
two
three

...在控制台中。