javascript - 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

Will 2nd declaration of mouse events function override the first one ?

没有。

How does jQuery deal with this ?

它按照事件处理程序附加的顺序执行它们。来自 the documentation (页面下方约 40%):

Event handlers bound to an element are called in the same order that they were bound.

例如，如果您有:

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

...in the console.

Note that it doesn't matter how you found the element to attach the handlers. Let's say you have only one div on the page, it has the id "someDiv", and it's the first child of body (just to make the selectors easy). If you have:

$("#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

...在控制台中。