Question

我想在div上添加一个点击处理程序。但有没有办法使用单击处理程序功能并在多个div之间共享？因为我可能有100个div，所以我不想为每个div创建一个click处理程序（它们几乎都会做同样的事情）。 jquery示例显示：

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

我们可以这样做：

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

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

Answer 1

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

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

测试示例： 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

Answer 2

对于运行较新版本jQuery（1.7或更高版本）的用户，您可以尝试.on()功能。

在不同的答案中重用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只是：

$('div#container').on('click', 'div', function() { alert('Hi Mom!'); });

代码与用于.delegate()示例的代码非常相似。

我遇到了一种情况，我们正在搜索所有<a>代码并应用特殊点击事件。对于包含数百个<a>标记的页面，运行jQuery需要几秒钟。切换到应用于body标签的.on()功能可以将时间缩短到几乎没有。

Answer 3

如果它们都归同一个元素所有：

<div id="lol">
<p>blah</p>
<p>slfk</p>
</div>

你可以做到

$('#lol').click(function(e){

alert( $(e.target).text() );

});

您也可以将其应用于文档。这样，您可以在1个元素上设置click并抓住target。你可以添加逻辑来确保它的段落等等。

这将只使用一个函数文字而不使用其他函数。比.delegate更少的开销，因为它在现场而不是在内部进行。

Answer 4

是

但是，没有必要（或能力）传递单独的source参数。 this对象在您的匿名函数中可用，并且在您的命名函数中也可用。它将一如既往地被点击的对象。

function myClickHandler() {
    $(this).foo();
}

Answer 5

是的，您可以为多个div使用相同的处理程序。如图所示，这将被设置为被单击的元素，您可以根据需要使用它。它不会作为参数传递，所以你的第二个例子不起作用。

$("div.someclass").click(myClickHandler);

function myClickHandler() {
    $(this).foo();
}

Answer 6

考虑以下代码：

$('div').bind('click', eventHandler);

eventHandler = function () { ... }

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

6 个答案: