Question

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.

Answer 1

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