javascript - jQuery 中的多个链式 .on ('click' ) 事件监听器

Question

我在轮播插件 ( GitHub repo here ) 上有几个 click 处理程序。

当我最初编码时，我忘记了 jQuery 链接:

$gallop.on("click", ".advance",  function(){ [snip 1] })
$gallop.on("click", ".retreat",  function(){ [snip 2] })
$gallop.on("click", ".autoplay", function(){ [snip 3] })
$gallop.on("click", ".picker",   function(){ [snip 4] });

它们都位于同一个 .gallop 元素上，因此我可以通过将它们链接在一起来改进代码:

$gallop
    .on("click", ".advance",  function(){ [snip 1] })
    .on("click", ".retreat",  function(){ [snip 2] })
    .on("click", ".autoplay", function(){ [snip 3] })
    .on("click", ".picker",   function(){ [snip 4] });

它们也都在监听 click 事件:只有每个处理程序的选择器不同。有没有办法将多个选择器/处理程序项放入同一个 .on() 方法中？像这样的吗？

$gallop
    .on("click", 
        ".advance",  function(){ [snip 1] },
        ".retreat",  function(){ [snip 2] },
        ".autoplay", function(){ [snip 3] },
        ".picker",   function(){ [snip 4] });

Answer 1

没有内置方法可以在一次 .on() 调用中指定多对独立的选择器/处理程序。

如果您希望为每个不同的选择器使用不同的事件处理函数，那么第二个选项可能是最简洁的方法。

您可以创建一个巨大的事件处理程序，然后根据目标进行分支(但除非您在所有处理程序中都有一堆通用代码，否则这可能不是最简洁的方法):

$gallop.on("click", ".advance, .retreat, .autoplay, .picker", function(e) {
    // look at the class on e.target and decide what to do
})