Несколько прикованных .on ('click') прослушивателей событий в jQuery

Question

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

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