Многоканальные обработчики событий.on('click') в jQuery

Question

У меня есть несколько click обработчики на плагине карусели ( GitHub репо здесь).

Когда я изначально его кодировал, я забыл о цепочке 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
})