A single Event Listener for the various elements

Question

Is it possible in JavaScript to have only one single listener for all <a> elements?

<ul>
    <li><a href="#1">1</a></li>
    <li><a href="#2">2</a></li>
    <li><a href="#3">3</a></li>
    <li><a href="#4">4</a></li>
    <li><a href="#5">5</a></li>
</ul>

That listener should take a value (e.g. #4) to update some div.

JQuery offers easy ways through the use of on delegates to wire up single handlers for a group of elements. — TGH, Oct 29 '14 at 02:05
See http://stackoverflow.com/questions/1687296/what-is-dom-event-delegation — Ryan Silva, Oct 29 '14 at 02:05
Sure, just bind a listener to the `ul`, and then do `event.target.hash` to get the number. http://jsfiddle.net/fdvacpz9/ — , Oct 29 '14 at 02:13

score 1 · Answer 1 · answered Oct 29 '14 at 02:22

I hope this piece of code helps you out, the listener attached on the ul tag is now catching all the click events on its children and parsing out their href values. You might want to use a jquery lib to further parse out the #hrefvalue.

  <ul>
<li><a href="#1">1</a></li>
<li><a href="#2">2</a></li>
<li><a href="#3">3</a></li>
<li><a href="#4">4</a></li>
<li><a href="#5">5</a></li>
</ul>
<script>
document.getElementsByTagName("ul")[0].addEventListener("click", function(e){
e.preventDefault();
alert(e.target.href);
});
</script>

`e.target` is not cross platform, try `e.target || e.srcElement` — Ryan McCullagh, Oct 29 '14 at 02:45

A single Event Listener for the various elements

1 Answers1