How Do I Attach A Single Function To A Multiple Element?
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><metacharset="utf-8"><title>Untitled Document</title><script>
(function(W){
var D;
functioninit(){
D=W.document;
D.getElementById('ul').addEventListener('click',h,false);
}
functionh(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><ulid="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><metacharset="utf-8"><title>Untitled Document</title><script>functioninizializzation () { // Here i inizialize the eventhandlervarTheULElement=window.document.getElementById('ul'); // search// for the element which id is ulTheULElement.addEventListener ( 'click' , clickhandler , false )
// here i add an event handler to the element which id is ul
}
functionclickhandler ( clickevent ) { // that handler i previously addedif ( clickevent.target.parentNode.id == 'ul' ) { // here i check if the // parent node id of the element i clicked is ulconsole.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><ulid="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
and that reflets the titleof the question
How do I attach a single function to a multiple element?
or also multiple elements which contains multiple elements.
in that case you need to think like on a large grid
rows are the li's
inside this li's i could add buttons spans or whatever and again only with that single eventhandler control them all.
based on the row/colum number or whatever you immagination has to offer.
with cols/rows your handler is on the prantNode of the parentNode.
if ( clickevent.target.parentNode.parentNode.id == 'ul' ) {
console.log( clickevent.target.textContent );
}
and the rows/colums would be
<ul> // whatever (div span) it just has to be a element <li> // whatever ,best if display:block/flex on all thiselements but
<whatever></whatever> // but with WHITESPACES this does not work
<whatever></whatever> // so it's better you add them with a script
<whatever></whatever> // or learn to write without WHITESPACES
<whatever></whatever> // or new lines.
<whatever></whatever> // because a textnode/newline/whitespace
</li>// in dom is a ELEMENT<li><whatever></whatever><whatever></whatever><whatever></whatever><whatever></whatever><whatever></whatever></li>
</ul>
Are there LOOPS ? NO.
ps.: i answered this question as it has already the green flag so i just try to help but my laguage is not english so feel free to correct my text . but pls don't touch my code.
Post a Comment for "How Do I Attach A Single Function To A Multiple Element?"