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

Question

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

假设我有这个HTML标记(由服务器动态生成或只是静态文件):

<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>

我想将click事件处理程序绑定到<a>标记.通常,我会写出来

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

这将对所有锚标记执行隐式迭代,以将click事件绑定到每个锚标记.但是,我被告知这是一项昂贵的操作.

我被问到是否有某种方法只能附加一个事件监听器(在ul标签上)并使用事件冒泡来确定单击了哪个锚标签.我从未遇到过这样的事情,所以我不知道答案.显然,有一个答案.有人知道如何在元素上放置单个事件监听器并让它知道单击了哪个子元素吗？(我仍然需要使用event.preventDefault()来阻止默认的单击事件.)

Answer 1

退房delegate()- 这正是你所要求的.

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

您可以获得jQuery处理程序的所有好处,而无需对所有这些元素进行绑定.