多个元素的单击处理程序？

Question

我想为div添加一个click处理程序.但有没有办法使用单击处理函数并在多个div之间共享？因为我可能有100个div,所以我不想为每个div创建一个click处理程序(它们几乎都会做同样的事情).jquery示例显示:

$("p").click(function () { 
    $(this).foo(); 
});

我们可以这样做:

$("p").click(myClickHandler);

function myClickHandler(source) {
    source.foo();
}

？

Answer 1

.delegate()如果你不想要数百个点击事件的开销,jQuery的方法是一个很好的方法.

它将一个事件分配给容器,当容器的指定后代获取事件时,该容器将被触发.

测试示例: https ://jsfiddle.net/jYKgm/210/

HTML

<div id="container">  // #container has the event handler assigned
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
</div>?

jQuery的

   // The click event handler will fire when <div> elements  
   //   that descend from #container get clicked.
$('#container').delegate('div', 'click', function() {
    alert('index ' + $(this).index() + ' was clicked');
});

这将为#container元素分配一个处理程序,并使其成为任何后代div元素将触发处理程序.

因此,如果有500个后代div元素,它们将共享一个事件处理程序.

？- .delegate()- http://api.jquery.com/delegate