在 .on() 方法事件映射中使用选择器的语法？

Question

我正在尝试使用事件映射创建一个 .on() 方法。我想把这个：$("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'
);

From the docs:

.on( events-map [, selector] [, data] )

events-map 字符串键表示一个或多个空格分隔事件的映射 类型和可选名称空间，值表示要调用的处理函数 事件。

selector 一个选择器字符串，用于过滤所选元素的后代 调用处理程序。如果选择器为空或省略，则始终调用处理程序 它到达选定的元素。

数据 事件发生时要传递给 event.data 中的处理程序的数据。

[] 中的参数是可选的。因此，如果您不传递选择器，则事件将绑定到 jQuery 对象中的元素，在这种情况下，页面上的所有 ul-元素。但是，如果提供了选择器，则 jQuery 对象中的元素会为选择器匹配的元素集处理事件委托。即，当一个事件发生在与 jQuery 对象中元素的后代的选择器匹配的元素上时，一旦事件冒泡到父级，就会调用该事件处理程序。请注意，这意味着如果事件传播在到达父级之前被取消，则不会调用事件处理程序。

Answer 2

事件地图之后：

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

示例： http://jsfiddle.net/pPPW4/

根据docs：

.on( events-map [, selector] [, data] )

Answer 3

事件地图之后：

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

来自documentation：

.on( events-map [, selector] [, data] )