One click handler for multiple elements?

I'm looking to a开发者_Go百科dd a click handler to a div. But is there a way to use a single click handler function and share it between multiple divs? Since I may have 100 divs, I don't want to create a click handler for each (they'll all practically do the same thing). The jquery example shows:

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

can we do something like:

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

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

?

---

jQuery's .delegate() method is a great way to go if you don't want the overhead of hundreds of click events.

It assigns one event to a container, which gets fired when the specified descendants of the container get the event.

Test the example: 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');
});

This will assign one handler to the #container element, and make it so that any descendant div elements will trigger the handler.

So if there are 500 descendant div elements, they will all share the one event handler.

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

---

For users running newer versions of jQuery (1.7 or later), you can try the .on() function.

Reusing the HTML example scenario in a different answer:

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

The jQuery would simply be:

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

The code looks very similar to that used for the .delegate() example.

I encountered a situation where we were searching for all <a> tags and applying special click events. For pages with hundreds of <a> tags, it was taking seconds to run the jQuery. Switching to the .on() function applied to the body tag shaved the time down to almost nothing.

---

If they are all owned by the same element:

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

You can do

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

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

});

You can apply it to the document too. This way you set the click on 1 element and grab the target. You can add logic to make sure its a paragraph and whatnot too.

This will only use the one function literal and no other functions. Less overhead than .delegate because it does it on the spot instead of internally.

---

Yes.

There's no need (or ability) to pass a separate source parameter, though. The this object was available in your anonymous function, and so too will it be available in your named function. It will, as always, be the object that was clicked.

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

---

Yes, you can use the same handler for multiple divs. As shown, this will be set to the element that was clicked, and you can use it however you wish. It will not be passed as an argument, so your second example doesn't work.

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

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

---

Consider this code:

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

eventHandler = function () { ... }