CODEWITHSUNDEEP
event-handlingjquery
brentonstrine
brentonstrine

Reputation: 22742

Behavior of .on().on() vs. only one .on()

I want to catch "inward" type events and do ABC, and catch "outward" type events to do XYZ. I'm getting problems with the various events firing at weird times that I didn't expect, so I'm wondering if my approach is actually causing the problem. 

<div class="box">first box</div>
<div class="box">second box</div>

$(".box")
  .on("focus mouseover mousedown", function(){ /* do ABC */ })
  .on("blur mouseout mouseup",     function(){ /* do XYZ */ });

I think that stringing the .on() methods together like this makes sure that the blur event is only triggered for that same .box. But other than that, I expect it behaves identically to if I did it this way:

$(".box").on("focus mouseover mousedown", function(){ /* do ABC */ });
$(".box").on("blur mouseout mouseup",     function(){ /* do XYZ */ });

or doing something like this: (which seems redundant)

$(".box").on({
  focus:     function(){   /* do ABC */ },
  mouseover: function(){   /* do ABC */ },
  mousedown: function(){   /* do ABC */ },

  blur:      function(){   /* do XYZ */ },
  mouseout:  function(){   /* do XYZ */ },
  mouseup:   function(){   /* do XYZ */ }
);

I'm not asking "which is better" but rather, "how are they different"? They seem to be getting different results.

Upvotes: 1

Views: 56

Answers (2)

Stephen
Stephen

Reputation: 5770

jQuery function calls return the selector-matched context of this, allowing chaining.

Because of this, your .on() chain will work as you intend.

Upvotes: 0

ggutenberg
ggutenberg

Reputation: 7360

They're different in the sense that your jQuery selector $(".box") only runs once, so chaining them is more efficient. Functionally they're identical.

Upvotes: 1

Related Questions