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

时间:2015-02-10 01:16:12

标签: javascript jquery performance jquery-chaining

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

1 个答案:

答案 0 :(得分:2)

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

如果你想为每个不同的选择器设置不同的事件处理函数,那么你的第二个选项可能是最干净的选择。

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

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