Multiple functions for mouse events jquery

Question

I'm working on a jQuery plugin. To separate my logic I do something like this:

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

and then above this I do that again but with other function body

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

How does jQuery deal with this ? Will 2nd declaration of mouse events function override the first one ? Sometimes I see both things works but sometimes not.

Answer 1

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

No.

How does jQuery deal with this ?

It executes your event handlers in the order in which they were attached. From the documentation (about 40% down the page):

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

So for instance, if you have:

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

...then clicking the div will give you

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"); });

and you click the div, you'll get

one
two
three

...in the console.