By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,969 Members | 2,250 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,969 IT Pros & Developers. It's quick & easy.

Common client side EventHandler

P: n/a
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
Jul 23 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
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
Jul 23 '05 #2

P: n/a
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.
Jul 23 '05 #3

P: n/a
> 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();
};
Jul 23 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.