Give an object multiple same-event handlers

MattEvans 0 156 Views

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 ('/*' != '//') ;) 

/* Start of the multihandle Object...*/
function MultiHandle(owner){
  var my_handlers = new Array();
  var my_owner = owner;
  this.append = function(handler){
    my_handlers[my_handlers.length] = handler;
  }
  this.fire = function(evt){
    var i;
    for(i = 0; i < my_handlers.length; i++){
      my_owner.tempspace = my_handlers[i];
      my_owner.tempspace(evt);
    }
  }
}
/* End of the multihandle object*/

/* start of the object add event handler script */


/*This bit goes where you'd normally write... 
... object.onmouseup = [event handler]...
... where [event handler] is an existing function ...
... that handles an event,  or even an 
... anonymous function.*/

if(typeof(MultiHandle) != "undefined"){
  var mup_handler = object.mh_onmouseup;
  if(!mup_handler){
    mup_handler = new MultiHandle(object);
    object.mh_onmouseup = mup_handler;
    object.onmouseup = function(evt){this.mh_onmouseup.fire(evt);};
  }
  mup_handler.append([event handler]);
}else{
  object.onmouseup = [event handler];
}

/* end of the object add event handler script*/
Member Avatar for MattEvans
MattEvans 473 Veteran Poster

The append handler part can be simplified to a single public function as so:

function multihandle_append(object,event,func){
  if(typeof(MultiHandle) != "undefined"){
    var mup_handler = object["mh_"+event];
    if(!mup_handler){
      mup_handler = new MultiHandle(object);
      object["mh_"+event] = mup_handler;
      object[event] = function(evt){this["mh_"+event].fire(evt);};
    }
    mup_handler.append(func);
  }else{
    object.onmouseup = func;
  }
}

and then called like:

multihandle_append(document.getElementById('object'),"onmouseup",function(param){code});
Member Avatar for digital-ether
digital-ether 399 Nearly a Posting Virtuoso

The DOM 2 Specs implements addEventListener().
IE uses attachEvent().

Thus you can have something like:

/**
* Add events
* @param Object HTML Element
* @param string name of trigger
* @param string name of function to attach
* @param bool capture
*/
addEvent = function(el, evType, fn, useCapture) {
	if (el.addEventListener) {
		el.addEventListener(evType, fn, useCapture);
		return true;
	}
	else if (el.attachEvent) {
		var r = el.attachEvent('on' + evType, fn);
		return r;
	}
	else {
		el['on' + evType] = fn;
	}
}

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

// .. include the MultiHandle Object of course

function multihandle_append(object,event,func){
  if(typeof(MultiHandle) != "undefined"){
    var mup_handler = object["mh_"+event];
    if(!mup_handler){
      mup_handler = new MultiHandle(object);
      object["mh_"+event] = mup_handler;
      object[event] = function(evt){this["mh_"+event].fire(evt);};
    }
    mup_handler.append(func);
  }else{
    object.onmouseup = func;
  }
}

/**
* Add events
* @param Object HTML Element
* @param string name of trigger
* @param string name of function to attach
* @param bool capture
*/
addEvent = function(el, evType, fn, useCapture) {
	if (el.addEventListener) {
		el.addEventListener(evType, fn, useCapture);
		return true;
	}
	else if (el.attachEvent) {
		var r = el.attachEvent('on' + evType, fn);
		return r;
	}
	else {
		multihandle_append(el, evType, fn);
	}
}

now we can use the DOM implementation or IE if supported, but fall back to multihandle if not..

Member Avatar for digital-ether
digital-ether 399 Nearly a Posting Virtuoso

lil typo there..

should be:

/**
* Add events
* @param Object HTML Element
* @param string name of trigger
* @param string name of function to attach
* @param bool capture
*/
addEvent = function(el, evType, fn, useCapture) {
	if (el.addEventListener) {
		el.addEventListener(evType, fn, useCapture);
		return true;
	}
	else if (el.attachEvent) {
		var r = el.attachEvent('on' + evType, fn);
		return r;
	}
	else {
		multihandle_append(el, 'on'+evType, fn);
	}
}

note the: 'on'+evType

Member Avatar for MattEvans
MattEvans 473 Veteran Poster

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Edit Preview