event-handling - .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()链条将按您的意愿工作。