jQuery: binding a single event listener that can handle events of its children

Question

I encountered a question to which I didn't know the solution for.

Suppose I have this HTML markup (dynamically generated by the server or simply a static file):

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

I want to bind a click event handler to the <a> tag. Normally, I would write out

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

which would perform implicit iteration on all the anchor tags to bind a click event to each of them. However, I was told that this is an expensive operation.

I was asked if there was some way to attach only one event listener (on the ul tag) and use event bubbling to figure out which anchor tag was clicked. I have never encountered something like this, so I didn't know the answer. Apparently, there is an answer. Does anybody know how to place a single event listener on an element and have it figure out which child element was clicked? (I still need to use event.preventDefault() to prevent the default click event.)

Answer 1

Check out delegate() — it's exactly what you're asking for.

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

You get all the benefits of a jQuery handler, without having to do the binding to all those elements.

Answer 2

You can access event.target, which will be the element that started the event.

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

jsFiddle.

However, Pointy's answer seems to be easier to use.

Answer 3

If you are using a version of jQuery >= 1.7 the .on() method supplants .delegate(). In both jQuery 2.x and 1.11 .delegate() simply calls .on():

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

To use it in this case:

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

Answer 4

The function you attach will have an event parameter that contains the object which is clicked in event.target.

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

Another solution, more complex, but more flexible too, although you won't need it in this situation, is to use the .bind method and specify a data object

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

In that case, you can reach event.data.whateverproperty, thus retrieving the value whatevervalue, allowing you to make more complex decisions.