Give an object multiple same-event handlers

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
MattEvans MattEvans is offline Offline Nov 11th, 2006, 8:18 pm |
0
You want your object to do a number of different things when it's clicked, and you've used up onmouseup, onmousedown and onclick. There are some properietry solutions to this, but it's quite a simple thing really.

Copy and paste the MultiHandle object into an empty js file, include it in your page, and wherever you'd write an event handler, use the MultiHandle object event handler script in the listing.

The standard behaviour is to fire each function in the order in which they were appended to the MultiHandle object. I bind the Multihandle for each event to the object that uses it somewhere, following a simple naming convention for which one is for where. Then I don't have to set everything up at the same time, and I never accidently overwrite a handler.

You could create a feedback chain in the MultiHandle fire event so that the next event only occurs if the last event returned true (or didn't return false). It's not the behaviour I wanted when I needed multiple handlers though.

Let me know if it doesn't work in a context, I made it for something very specific and it works there

Edited this (14th Feb 2007) because the snippet was one giant JS comment ('/*' != '//')
Show Printable Version Show Printable Version
Quick reply to this message  
Code Snippet
•
•
•
•
JavaScript / DHTML / AJAX Syntax
Toggle Plain Text
  1. /* Start of the multihandle Object...*/
  2. function MultiHandle(owner){
  3.   var my_handlers = new Array();
  4.   var my_owner = owner;
  5.   this.append = function(handler){
  6.     my_handlers[my_handlers.length] = handler;
  7.   }
  8.   this.fire = function(evt){
  9.     var i;
  10.     for(i = 0; i < my_handlers.length; i++){
  11.       my_owner.tempspace = my_handlers[i];
  12.       my_owner.tempspace(evt);
  13.     }
  14.   }
  15. }
  16. /* End of the multihandle object*/
  17.  
  18. /* start of the object add event handler script */
  19.  
  20.  
  21. /*This bit goes where you'd normally write... 
  22. ... object.onmouseup = [event handler]...
  23. ... where [event handler] is an existing function ...
  24. ... that handles an event,  or even an 
  25. ... anonymous function.*/
  26.  
  27. if(typeof(MultiHandle) != "undefined"){
  28.   var mup_handler = object.mh_onmouseup;
  29.   if(!mup_handler){
  30.     mup_handler = new MultiHandle(object);
  31.     object.mh_onmouseup = mup_handler;
  32.     object.onmouseup = function(evt){this.mh_onmouseup.fire(evt);};
  33.   }
  34.   mup_handler.append([event handler]);
  35. }else{
  36.   object.onmouseup = [event handler];
  37. }
  38.  
  39. /* end of the object add event handler script*/
Code Snippet Comments
0
MattEvans MattEvans is offline Offline | Jan 3rd, 2007
•
•
•
•
The append handler part can be simplified to a single public function as so:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. function multihandle_append(object,event,func){
  2.   if(typeof(MultiHandle) != "undefined"){
  3.     var mup_handler = object["mh_"+event];
  4.     if(!mup_handler){
  5.       mup_handler = new MultiHandle(object);
  6.       object["mh_"+event] = mup_handler;
  7.       object[event] = function(evt){this["mh_"+event].fire(evt);};
  8.     }
  9.     mup_handler.append(func);
  10.   }else{
  11.     object.onmouseup = func;
  12.   }
  13. }

and then called like:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. multihandle_append(document.getElementById('object'),"onmouseup",function(param){code});
 
0
digital-ether digital-ether is offline Offline | Jan 15th, 2007
•
•
•
•
The DOM 2 Specs implements addEventListener().
IE uses attachEvent().

Thus you can have something like:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. /**
  2. * Add events
  3. * @param Object HTML Element
  4. * @param string name of trigger
  5. * @param string name of function to attach
  6. * @param bool capture
  7. */
  8. addEvent = function(el, evType, fn, useCapture) {
  9. 	if (el.addEventListener) {
  10. 		el.addEventListener(evType, fn, useCapture);
  11. 		return true;
  12. 	}
  13. 	else if (el.attachEvent) {
  14. 		var r = el.attachEvent('on' + evType, fn);
  15. 		return r;
  16. 	}
  17. 	else {
  18. 		el['on' + evType] = fn;
  19. 	}
  20. }

maybe your code could be used together with this to attach multiple events if the browser does not support addEventListener and attachEvent.

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1.  
  2. // .. include the MultiHandle Object of course
  3.  
  4. function multihandle_append(object,event,func){
  5.   if(typeof(MultiHandle) != "undefined"){
  6.     var mup_handler = object["mh_"+event];
  7.     if(!mup_handler){
  8.       mup_handler = new MultiHandle(object);
  9.       object["mh_"+event] = mup_handler;
  10.       object[event] = function(evt){this["mh_"+event].fire(evt);};
  11.     }
  12.     mup_handler.append(func);
  13.   }else{
  14.     object.onmouseup = func;
  15.   }
  16. }
  17.  
  18. /**
  19. * Add events
  20. * @param Object HTML Element
  21. * @param string name of trigger
  22. * @param string name of function to attach
  23. * @param bool capture
  24. */
  25. addEvent = function(el, evType, fn, useCapture) {
  26. 	if (el.addEventListener) {
  27. 		el.addEventListener(evType, fn, useCapture);
  28. 		return true;
  29. 	}
  30. 	else if (el.attachEvent) {
  31. 		var r = el.attachEvent('on' + evType, fn);
  32. 		return r;
  33. 	}
  34. 	else {
  35. 		multihandle_append(el, evType, fn);
  36. 	}
  37. }

now we can use the DOM implementation or IE if supported, but fall back to multihandle if not..
 
0
digital-ether digital-ether is offline Offline | Jan 15th, 2007
•
•
•
•
lil typo there..

should be:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. /**
  2. * Add events
  3. * @param Object HTML Element
  4. * @param string name of trigger
  5. * @param string name of function to attach
  6. * @param bool capture
  7. */
  8. addEvent = function(el, evType, fn, useCapture) {
  9. 	if (el.addEventListener) {
  10. 		el.addEventListener(evType, fn, useCapture);
  11. 		return true;
  12. 	}
  13. 	else if (el.attachEvent) {
  14. 		var r = el.attachEvent('on' + evType, fn);
  15. 		return r;
  16. 	}
  17. 	else {
  18. 		multihandle_append(el, 'on'+evType, fn);
  19. 	}
  20. }

note the: 'on'+evType
 
0
MattEvans MattEvans is offline Offline | Jan 21st, 2007
•
•
•
•
When I wrote that code; it was after reading that there was no standardised method to do such a thing.. even then perhaps that was an outdated fact.

The main problem with multihandle_append is it will always overwrite handlers if there is no MultiHandle object yet for that event.,. So you have to assign all event handlers using javascript code (as apposed to just typing onclick = "etc.."). The multihandle_append function could probably be hacked a bit more to add any existing event handlers to the top of a new MultiHandle object's function s(t)ack..

I imagine the new DOM spec method respects attributed event handlers automatically; I'd definately advise using that availability checking code from digital-ether; and using MH as a dependable last-resort rather than an optimum first choice.
 
 

Quick Comment
•
•
•
•
•
•
•
•
Message:
•
•
•
•


Similar Threads
Thread Tools Search this Thread



Tag cloud for JavaScript / DHTML / AJAX
acid2 ajax ajaxcode ajaxhelp animate array automatically autoplay beta boarder box bug calendar captcha card cart codes column cookies createrange() css cursor date debugger decimal design developer dom download dropdown element enter error events firefox firehose flash focus form frameworks getselection google gwt html htmlform iframe image() images index java javascript javascripts jawascriptruntimeerror jquery jsp listbox maps marquee masterpage menu microsoft mimic mp3 mp4 offline onmouseover parameters php player post problem programming progressbar prototype rating redirect regex safari scale scriptlets search select size sources sql starrating text textarea toggle twitter validation variables w3c web website window windowofwords windowsxp xml xspf
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC