Multiple eventhandlers on a single event

[JeeWee]

Hi all,

I'm looking for a way to "bind" multiple eventhandler function to the same
event. In other languages this can often be done by using the += operator,
unfortunately this doesn't seem to work.

My (working) code for assigning an eventhandler for some form elements is:

for( var i = 0; i < document.formx.elements.length; i++ ) {
document.formx.elements.readonly = true;
alert( document.formx.elements.onclick );
document.formx.elements.onclick = HandlerFunctionX;
}

Is this possible? And if so, how should it be accomplished?

Thanks in advance,

Jan-Willem

 

[ZER0]

I'm looking for a way to "bind" multiple eventhandler function to the same
event. In other languages this can often be done by using the += operator,

In C#, uh?

unfortunately this doesn't seem to work.

You can use addEventListener method (for browsers DOM W3C compliant), and
attachEvent for IE.

Or simply:

object.onclick=function(){
f1();
f2();
f3();
}


--
C'ya,
ZER0 :: coder.gfxer.webDesigner();

...ma in effetti il concetto di WYSYWYG (quello che vedi e' quello che
ottieni)
si applica ai computer malissimo, cosi' come si applica alle donne...
(The Real Programmer)

Now playing: nothing

 

[Grant Wagner]

Hi all,

I'm looking for a way to "bind" multiple eventhandler function to the same
event. In other languages this can often be done by using the += operator,
unfortunately this doesn't seem to work.

My (working) code for assigning an eventhandler for some form elements is:

for( var i = 0; i < document.formx.elements.length; i++ ) {
document.formx.elements.readonly = true;

The property name is "readOnly", not "readonly".

alert( document.formx.elements.onclick );
document.formx.elements.onclick = HandlerFunctionX;
}

Is this possible? And if so, how should it be accomplished?

I solved this a while back because I had the same requirement. Here is the
solution I came up with:

function appendFormElementEvent(formName, elementName, elementEvent,
eventHandler) {

var f = document.forms[formName];

if (f && f.elements[elementName]) {

f = f.elements[elementName];

if (f[elementEvent]) {
// there is currently an on... event defined for this
// element; append the event handler javascript to the
// current event handler javascript
f[elementEvent] = new Function(
// take the original event
f[elementEvent]
// convert it to a string; the string looks like:
// "...function...()...{...[js]...}..."
.toString()
// remove any newline characters or carriage returns
.replace(/[\r\n]/g, '')
// remove any leading or trailing whitespace
.replace(/\s+$|^\s+/g, '')
// turn "function...()...{...[js]...}"
// into "function...()...{...[js][newline][new js]...}"
// NOTE: THE NEXT LINE IS A SINGLE STATEMENT WHICH WILL
// MOST LIKELY WRAP
.replace(/^function\s*\w+\s*\(\w*\)\s*\{\s*(.*)\s*\}$/, '$1\n' +
eventHandler)
);
} else {
// there is currently no on... event defined for this
// element; set the event handler javascript to handle
// the event
f[elementEvent] = new Function(eventHandler);
}
}
} // appendFormElementEvent()

- formName is a string, the name of the form
- elementName is a string, the name of the element
- elementEvent is a string, the name of the event (onclick, onfocus, etc)
- eventHandler is a string, the new Javascript code to be added to the event

you use it as follows:

appendFormElementEvent('myForm', 'mySelect', 'onchange', 'function1();');
appendFormElementEvent('myForm', 'mySelect', 'onchange',
'alert(this.selectedIndex);');

Works in Geck based browsers (Mozilla, Firefox, Camino), Internet Explorer
5.5+, Netscape 4.78 and Opera 7+. You might be able to get it working in Opera
6, I have no idea why it doesn't, most likely the format of the toString()
returned by the currently defined event.

I'm sure there are other browsers it doesn't work in, it might be possible to
massage the regular expression to handle those browsers if it were really
necessary.

Thanks in advance,

Jan-Willem

--
| Grant Wagner <[email protected]>

* Client-side Javascript and Netscape 4 DOM Reference available at:
*
http://devedge.netscape.com/library/manuals/2000/javascript/1.3/reference/frames.html

* Internet Explorer DOM Reference available at:
*
http://msdn.microsoft.com/workshop/author/dhtml/reference/dhtml_reference_entry.asp

* Netscape 6/7 DOM Reference available at:
* http://www.mozilla.org/docs/dom/domref/
* Tips for upgrading JavaScript for Netscape 7 / Mozilla
* http://www.mozilla.org/docs/web-developer/upgrade_2.html

 

[Jan-Willem]

Thanks for both replies,

The addEventListener and attachEvent/detachEvent methods worked for me.
It was exactly what i was looking for. Using these methods required minimal
amount of code, .. which i like

Indeed C# and i believe Java too use the += for adding multiple
eventhandlers to an event.

Thanks again,

- JW

I'm looking for a way to "bind" multiple eventhandler function to the same
event. In other languages this can often be done by using the += operator,

In C#, uh?

unfortunately this doesn't seem to work.

You can use addEventListener method (for browsers DOM W3C compliant), and
attachEvent for IE.

Or simply:

object.onclick=function(){
f1();
f2();
f3();
}


--
C'ya,
ZER0 :: coder.gfxer.webDesigner();

...ma in effetti il concetto di WYSYWYG (quello che vedi e' quello che
ottieni)
si applica ai computer malissimo, cosi' come si applica alle donne...
(The Real Programmer)

Now playing: nothing