jQuery：绑定一个可以处理其子事件的事件监听器

Question

我遇到了一个我不知道解决方案的问题。

假设我有这个 HTML 标记（由服务器动态生成或只是一个 static 文件）：

<ul class="myList">
<li><a href="page1.html">Page 1</a></li>
<li><a href="page2.html">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
<li><a href="page4.html">Page 4</a></li>
<li><a href="page5.html">Page 5</a></li>
<li><a href="page6.html">Page 6</a></li>
<!-- ... -->
<li><a href="page1000.html">Page 1000</a></li>
</ul>

我想将单击事件处理程序绑定到 <a> 标记。 通常，我会写出

$('.myList').find('a').click(function() {});  /* Or something similar */

这将对所有锚标签执行隐式迭代，以将点击事件绑定到每个锚标签。 但是，有人告诉我这是一项昂贵的手术。

有人问我是否有某种方法可以仅附加一个事件侦听器（在 ul 标签上）并使用事件冒泡来确定单击了哪个锚标签。 我从来没有遇到过这样的事情，所以我不知道答案。 显然，有一个答案。 有谁知道如何在一个元素上放置一个事件监听器并让它找出点击了哪个子元素？ （我仍然需要使用 event.preventDefault() 来防止默认点击事件。）

Answer 1

查看delegate() — 这正是您所要求的。

$('ul.mylist').delegate('a', 'click', function() {
  // ... your code ...
});

您可以获得 jQuery 处理程序的所有好处，而无需绑定到所有这些元素。

Answer 2

您可以访问event.target ，这将是启动事件的元素。

$('.myList').click(function(event) {
   var target = $(event.target);
});

js小提琴。

但是， Pointy 的答案似乎更容易使用。

Answer 3

如果您使用的是 jQuery >= 1.7 的版本，则.on()方法将取代.delegate() 。 在 jQuery 2.x和1.11 .delegate()只需调用.on() ：

delegate: function( selector, types, data, fn ) {
        return this.on( types, selector, data, fn );
}

在这种情况下使用它：

$(".myList li a").on("click", function(e) {
  //Code here, and you can use e.preventDefault(); to avoid the default event.
});

Answer 4

您附加的 function 将有一个事件参数，其中包含在event.target中单击的 object。

 $(.....).click(function(event){  ....  });

另一种更复杂但也更灵活的解决方案是使用.bind方法并指定数据 object

$(.....).bind('click', {whateverproperty: whatevervalue}, function(event){ ... });

在这种情况下，您可以访问event.data.whateverproperty ，从而检索值whatevervalue ，让您做出更复杂的决定。