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

Posted 2023-05-09

【中文标题】jQuery 中的多个链式 .on(\'click\') 事件侦听器

【英文标题】：Multiple chained .on('click') event listeners in jQueryjQuery 中的多个链式 .on('click') 事件侦听器

【发布时间】：2015-04-09 22:38:12

【问题描述】：

我在轮播插件 (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] );

【问题讨论】：

你能使用事件委托吗？所以也许查看 event.target 以确定哪个被点击了？你有代码sn-p吗？

@cgatian - 这已经是事件委托了。

好的。好吧，我猜你只是用我所说的话提供了一个答案..

问题中提供的代码 sn-ps 可在链接到的 GitHub 项目上找到。

【参考方案1】：

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

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

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

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