How Do I Attach A Single Function To A Multiple Element?

Question

If I have two anchor tags that would trigger a same function, (i.e. multiple button to close a navigation bar) how would I bind both elements with the event? No JQUERY html:

Solution 1:

var ctlOne = document.getElementById("ctl_one");
var ctlTwo = document.getElementById("ctl_two");

ctlOne.onClick = ctlTwo.onclick = toggleNav;

Solution 2:

You can't do it in one line, but I don't see what's stopping you from doing this:

ctlOne.onClick = toggleNav;
ctlTwo.onClick = toggleNav;

Or, more DRY:

var both = [ctlOne, ctlTwo];
for (var i=0; i<both.length; i++) {
    both[i].onClick = toggleNav;
}

Solution 3:

REAL ONE eventHandler on multiple items

When i create lists or grids which need the same function i use only one eventhandler and decide inside that handler what to do.

Heaving one eventhandler means if you unload the code you have to remove only one handler, but also uses alot less resources and updating the code is simpler.

In your case i had to include a long function (slice call...) to get the index of the clicked li and check if i should execute your toggleNav function or not.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script>
(function(W){
var D;
function init(){
 D=W.document;
 D.getElementById('ul').addEventListener('click',h,false);
}
function h(e){
 var a=e.target,i=Array.prototype.slice.call(a.parentNode.childNodes).indexOf(a);
 if(a.parentNode.id=='ul'){
  console.log('text: ',a.textContent,' index: ',i,' execute toggleNav: ',i<2);
 }
}
W.addEventListener('load',init,false)
})(window)
</script>
</head>
<body>
<ul id="ul"><li>a</li><li>b</li><li>c</li></ul>
</body>
</html>

As you can see the code is short, no loops. But most of all you only have ONE handler!!

this naturally works on modern browsers only but with some changes it does the same in all browsers, i think something like e=e||window.event; e.target=e.target||e.srcElement..

EDIT

SIMPLE EXAMPLE WITH LONG VARIABLE NAMES and WHITESPACES everywhere as requested by matt, but use the above example at it caches the various elements and it's compatible with external libraries even if you extend it.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script>
function inizializzation () { // Here i inizialize the eventhandler
 var TheULElement=window.document.getElementById('ul'); // search
 //  for the element which id is ul
 TheULElement.addEventListener ( 'click' , clickhandler , false )
 // here i add an event handler to the element which id is ul
}
function clickhandler ( clickevent ) { // that handler i previously added
 if ( clickevent.target.parentNode.id == 'ul' ) { // here i check if the 
  // parent node  id of the element i clicked is ul
  console.log( clickevent.target.textContent );
  // this writes to the console 
  //-> rigthclick 'inspect element' (in chrome) 
 }
}
window.addEventListener ( 'load' , inizializzation , false )
 // this is the event handler when the page loads
 // which starts the first function called inizializzation
</script>
</head>
<body>
<ul id="ul">
 <li>a</li>
 <li>b</li>
 <li>c</li>
 <li>d</li>
 <li>e</li>
 <li>f</li>
 <li>g</li>
 <li>h</li>
 <li>i</li>
</ul>
</body>
</html>

The point of this answer is not just to handle the 2 elements but multiple elements