Синтаксис использования селектора в методе .on ().

Question

Я пытаюсь создать метод .on (), используя events-map.Я хочу изменить это: $("ul").on("click", "li", function() {...}); на что-то вроде этого:

$("ul").on({
    click: function() {...},
    mouseenter: function() {...},
    mouseleave: function() {...}
});

Куда поместить селектор "li" в карте событий?

Answer 1

Вы просто ставите его как второй аргумент, как обычно:

$("ul").on (
  {
    click: function() { ... },
    mouseenter: function() { ... },
    mouseleave: function() { ... }
  },
  'li'
);

Из документов :

.on (карта событий [, селектор] [, данные])

events-map Карта, в которой строковые ключи представляют одно или несколько разделенных пробелами событий типы и необязательные пространства имен, а значения представляют функцию-обработчик для вызова для события (й).

селектор Строка селектора для фильтрации потомков выбранных элементов, которые будут позвонить обработчику Если селектор нулевой или опущен, обработчик всегда вызывается, когда он достигает выбранного элемента.

data Данные, передаваемые обработчику в event.data при возникновении события.

Параметры, заключенные в [], являются необязательными. Таким образом, если вы не передадите селектор, события будут привязаны к элементам в объекте jQuery, в данном случае ко всем ul -элементам на странице. Однако, если предоставляется селектор, то элементы в объектах jQuery обрабатывают делегирование событий для набора элементов, соответствующих селектору. Т.е. когда происходит событие в элементе, соответствующем селектору, который является потомком элемента в объекте jQuery, этот обработчик события будет вызван после того, как событие всплывет до родительского объекта. Обратите внимание, что это означает, что если распространение события отменяется до того, как оно достигнет родителя, обработчик события вызываться не будет.

Answer 2

После карты событий:

$("ul").on ({
    click: function() { ... },
    mouseenter: function() { ... },
    mouseleave: function() { ... }
}, "li");

Пример: http://jsfiddle.net/pPPW4/

По документам :

.on (карта событий [, селектор] [, данные])

Answer 3

После карты событий:

$("ul").on ({
    click: function() { ... },
    mouseenter: function() { ... },
    mouseleave: function() { ... }
}, 'li');

Из документации :

.on (карта событий [, селектор] [, данные])