jQuery中的多个链式.on('click'）事件侦听器

Multiple chained .on('click') event listeners in jQuery

本文关键字：click 侦听器 事件 on jQuery      更新时间：2023-09-26

我在转盘插件上有几个click处理程序（此处为GitHub repo）。

当我最初对它进行编码时，我忘记了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] });

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

如果你想为每个不同的选择器提供不同的事件处理功能，那么你的第二个选项可能是最干净的方法

你可以制作一个巨大的事件处理程序，然后根据目标进行分支（但除非你在所有处理程序中有一堆公共代码，否则这可能不是最干净的方法）：

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