.on().on() 的行为与只有一个 .on() 的行为

Question

我想捕获"向内"类型的事件并执行ABC，并捕获"向外"类型的事件来执行XYZ。我在我没想到的奇怪时间触发各种事件时遇到了问题，所以我想知道我的方法是否真的导致了问题。

<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 */ });

我认为像这样将.on()方法串在一起可以确保仅为同一.box触发模糊事件。但除此之外，我希望它的行为与我这样做的行为相同：

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

或者做这样的事情：（这似乎是多余的）

$(".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 */ }
);

我不是在问"哪个更好"，而是在问"它们有何不同"？他们似乎得到了不同的结果。

Answer 1

它们的不同之处在于您的 jQuery 选择器$(".box")只运行一次，因此链接它们更有效。 在功能上它们是相同的。

Answer 2

jQuery函数调用返回this的选择器匹配上下文，允许链接。

因此，您的.on()链将按您的预期工作。