Javascript Event Handlers addEventListener attachEvent Detect Case Pass Argument

»»» shrink text ««« ««« enlarge text »»»

OBJECTIVE: attach events to a DOM node (layer, tag) detecting what syntax to use and regardless of whether the event name is passed with the prefix on or not.  
 
A simple task.  

function addevent(element, event, func){
if(typeof func=="string"){func=window[func];};
if(typeof element=="string"){element=document.getElementById(element);};
if(!element || typeof event!="string" || typeof func!="function"){return false;};
event=event.toLowerCase();
if(typeof element['addEventListener']!="undefined"){
	if(event.indexOf('on')>-1){event=event.replace(/^on/, '');};
element.addEventListener(event, func, false);
return true;
}
else if(typeof element['attachEvent']!="undefined"){
	if(event.indexOf('on')!=0){event='on'+event;};
element.attachEvent(event, func);
return true;
}
else{
	if(event.indexOf('on')!=0){event='on'+event;};
element[event]=func;
};
return false;
/*keep this comment to reuse freely:
http://www.fullposter.com/?1 */}

Remove colors  
INPUTS: first either an already grabbed DOM node (such as, for instance, by getElementById) or a string: in the latter case it is presumed it represents a valid id assigned to a layer.  
 
Then the event as a string: it can either start with 'on' or not, the function will work out the rest (instance, both "onclick" or "click" would work).  
 
Then the function to attach, either as the string name of the function (exclusive of brackets) or as the function object itself (also anonymous functions would do).  
 
RETURNS: boolean false in case of wrong inputs or failure, or boolean true.  
 
CAVEATS: if neither the addEventListener or the attachEvent javascript built in methods are detected as available, the function to be assigned is assigned without using them: in this case this implies that, if any other event handler for that event had already been previously assigned to that element, it will be overwritten by the new assigned one.  
 
Beware, if either addEventListener or attachEvent are available, each subsequent assignment will assign the task again to the element.  
OBJECTIVE: attach events to a DOM node (layer, tag) detecting what syntax to use and regardless of whether the event name is passed with the prefix on or not, and pass arguments to the attached functions.  

function addevent2(element, event, func, argumentsArray){/*presumes func uses javascript closures*/
if(typeof func=="string"){func=window[func];};
if(typeof element=="string"){element=document.getElementById(element);};
if(!element || typeof event!="string" || typeof func!="function"){return false;};
event=event.toLowerCase();
if(typeof element['addEventListener']!="undefined"){
	if(event.indexOf('on')>-1){event=event.replace(/^on/, '');};
element.addEventListener(event, func(argumentsArray), false);
return true;
}
else if(typeof element['attachEvent']!="undefined"){
	if(event.indexOf('on')!=0){event='on'+event;};
element.attachEvent(event, func(argumentsArray));
return true;
}
else{
	if(event.indexOf('on')!=0){event='on'+event;};
element[event]=func(argumentsArray);
};
return false;
/*keep this comment to reuse freely:
http://www.fullposter.com/?1 */}

Remove colors  
INPUTS: as above, plus another input argument which must be an array whose each item represents one of the arguments to pass to the newly assigned event handler function.  
 
RETURNS: as above.  
 
CAVEATS: as above.  
Then, your event handler function to be assigned must use javascript closures. So your event handler function must have this structure, whereas foofunc1 and myargs are placeholder names for whatever other names you may prefer to use:  

function foofunc1(myargs){
return function(/*NO args here*/){
	/*your code goes HERE; the argument named myargs is available in here too and can be called from within this area.*/
}
}

Remove colors  
 
Instance:  

<div id="foofoo" style="border:#000000 1px solid;">Hallo World</div>

<script>
function foofunc1(myargs){
return function(/*NO args here*/){
	var element=document.getElementById(myargs[0]);
	var aValue=myargs[1];
	element.style.cssText=element.style.cssText+';'+aValue;
}
}

addevent2('foofoo', 'click', foofunc1, ['foofoo', 'border-color:#ff0000;'])

</script>

Click on Hallo world above now. Its border will become red.

Remove colors

Visitors: 22,811
Overall visits to all the topics: 4,959,661
Daily average (Calculated from the website subscription day): 2,059.66 Optional sorting commands:
Normal order: click here
Order by amount of visits: click here
Order by category: Programming Javascript
Current order: by category: Emergency Care Other categories available for this author (Limited data report: 100):
Advice: Martial Arts and Self Defense(4), Books(236), Critical Reviews and Essays(4), Dictionaries(1), Emergency Care(4), Epistles Letters and Advice(5), Fantasy Epics and Fables(1), History and Documents(5), Humor and Jokes(2), Methematics(2), Music and Lyrics(6), News Digests and Press Reviews(1), Novels Poetry and Stories(3), Philosophy Reviews(7), Poetry(1), Programming(4), Programming Ajax(2), Programming Javascript(82), Programming Php(52), Psychology(1), Quotes(1), Religion Esoterica and Spirituality(12), Scientifical Reviews(4), Self Improvement(1), Sport Activities and Apparels(2), Tarots(1) Showing topics: 1, 10
Available total: 448 View only a list of the snippets by this author: click here.
Other topics available for this author: click on any title below to view the complete item: