Common client side EventHandler

[Remco]

Hello,

Serverside I'm generating a html page.
There are different controls for which I want to create an
eventhandler manually.

Like:

document.forms[0].TextBox1.onchange = EventHandler;
document.forms[0].Button1.onclick = EventHandler;

function EventHandler(){
// do something
}

What I would like is to pass arguments to the Eventhandler.

Like:
document.forms[0].TextBox1.onchange = EventHandler('test1');
document.forms[0].Button1.onclick = EventHandler('test2');

function EventHandler(inp){
// do something conditioned by parameter.
}
This sample is simplified, additional, in the EventHandler I'll
execute the original eventhandlers which I'm gonne store in a
variable.
So, the question:

Is it possible to have an eventhandler with parameters? or should I
create an eventhandler for all controls which need some extra dynamic
behavior?

By the way, Yes, I know I can simply use <input type="text"
id="TextBox1" onclick="DoFunction();" />
But that's not what I want in this case.
Thanks in advance!

Remco

[Daniel Kirsch]

Remco wrote:

Hello,

Serverside I'm generating a html page.
There are different controls for which I want to create an
eventhandler manually.

Like:

document.forms[0].TextBox1.onchange = EventHandler;
document.forms[0].Button1.onclick = EventHandler;

function EventHandler(){
// do something
}

What I would like is to pass arguments to the Eventhandler.

Like:
document.forms[0].TextBox1.onchange = EventHandler('test1');
document.forms[0].Button1.onclick = EventHandler('test2');

You cannot pass additional arguments to your event handler as the call
will be generated by the browser. However, you may set some additional
properties for your object and check the event.target for that property.

eg:

var elm = document.forms[0].TextBox1;
elm.param = "foo";
elm.onchange = EventHandler;

function EventHandler(e){
e = e || window.event;
var target = e.target || e.srcElement;
if (target) {
param = target.param;
if (param == "foo") {
// do it
}
}
}

Daniel

[Michael Winter]

On 2 Dec 2004 03:39:48 -0800, Remco <re*****@hotmail.com> wrote:

[snip]

Is it possible to have an eventhandler with parameters? or should I
create an eventhandler for all controls which need some extra dynamic
behavior?

By the way, Yes, I know I can simply use <input type="text"
id="TextBox1" onclick="DoFunction();" />
But that's not what I want in this case.

Yes, by emulating what happens when you add a listener via an intrinsic
event attribute.

When a user agent (that supports scripting) encounters

<element onclick="...">

it creates an anonymous function and inserts your code into it:

elementRef.onclick = function(event) {
/* ... */
};

You can do the exact same thing. Instead of writing

element.onclick = handler('...');

use

element.onclick = function(evt) {
handler('...');
};

Be aware that if 'handler' needs a reference to 'element', you'll have to
pass it as an argument. Similarly, if you want the event object, you'll
have to pass that too after changing the above to:

element.onclick = function(evt) {
/* IE doesn't pass the event object to
* listeners - it exists as a global
*/
evt = evt || event;
handler('...');
};

Hope that helps,
Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

[Julian Turner]

> Is it possible to have an eventhandler with parameters? or should I

create an eventhandler for all controls which need some extra dynamic
behavior?
The simple answer is not directly.

When an event handler is called, it can have no parameters. In fact,
other than IE, an event handler is called with just one parameter -
the "event" object itself. E.g. for cross-browser event handling:-

myElement.onlick=function(eEvent)
{
var eEvent=window.event||eEvent;

// Do something.
};

If you want to feed parameters to an event handler then there are two
basic ways to do this.

1. Use global level variables. I.e. variables defined at the global
level of your script.

<script>
var myParam=1;
myElement.onlick=function(eEvent)
{
var eEvent=window.event||eEvent;

alert(myParam);
};

</script>

2. Add properties to the element itself.

myElement.aProperty=1;

myElement.onclick=function()
{
function Display(eL)
{
alert(eL.aProperty);
}

Display(this);
};

3. Use "closures" (of which global level variables are an example in
fact).

Generally a variable defined in a parent function is available to a
sub-function.

Thus:-

<script>
function Parent()
{
var nParentVar=1;

function Child()
{
alert(nParentVar);
}

}

Parent();

</script>

With this you can prime functions with objects (called "currying").

<html>
<head>
<script>

function Initialise(eElement)
{
var oStyle=new Object;

eElement.onclick=function()
{
eElement.style.backgroundColor=oStyle.sColor;
};

return oStyle;
};

function Start()
{
var eDiv=document.getElementById("myDiv");
var oStyle=Initialise(eDiv);
oStyle.sColor="red";
}

</script>
</head>
</body>
<p onclick="fStart(this)">Click to initialse DIV handler</p>

<div id="myDiv" style="width:100; height:100; border-width:1;
border-style:solid; border-color:black;"></div>

</body>
</html>

By the way, Yes, I know I can simply use <input type="text"
id="TextBox1" onclick="DoFunction();" />
But that's not what I want in this case.

In fact, what is happening is that "DoFunction()" is wrapped in an
anonymous function.

Equivalent to:

TextBox1.onlclick=function()
{
DoFunction();
};