How to dynamically assign event handler functs w/ parameters?

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

N. Demos - 24 Feb 2005 17:06 GMT

How do you dynamically assign a function to an element's event with
specific parameters?

I know that the code is different for MSIE and Mozilla, and need to know
how to do this for both.

I have the following event handler functions defined and need to assign
them to table elements (<TD>) created dynamically in another function.

function handleMouseOver(elt, cssClass, strURL)
{
...
}

handleMouseOut(elt, cssClass)
{
...
}

handleMouseDown(elt, cssClass)
{
...
}

handleMouseUp(elt, cssClass, strURL)
{
...
}

The code frag below is where they need to be assigned.

Thanks,
N. Demos

Example (Code Fragment):
-------------------------

for(i = 0; i < 5; i++){
// Construct 'TR' Node
var eltNewRow = document.createElement('TR');
eltNewRow.id = (strMenuID + '-SUBMENU_BUTTON' + i);

// Construct 'TD' Button
var eltButton = document.createElement('TD');
eltButton.appendChild(document.createTextNode('SubButton ' + (i +
1)));
eltButton.className = 'subNavNormButton';

var strTargetURL = arrayURLList[i];

// ***** Assign Mouse Event Handlers *****
eltButton.onmouseover = handleMouseOver(this, 'subNavHoverButton',
strTargetURL);
eltButton.onmouseout = handleMouseOut(this, 'subNavNormButton');
eltButton.onmousedown = handleMouseDown(this, 'subNavPressButton');
eltButton.onmouseup = handleMouseUp(this, 'subNavHoverButton',
strTargetURL);

// Insert Element Into Tree
eltNewRow.appendChild(eltButton);

if(eltInsertionRow && parentMenu){
parentMenu.insertBefore(eltNewRow, eltInsertionRow);
}
else if(parentMenu){
parentMenu.appendChild(eltNewRow);
}
}

Signature

Change "seven" to a digit to email me.

Reply to this Message

RobG - 24 Feb 2005 20:49 GMT

> How do you dynamically assign a function to an element's event with
> specific parameters?

[...]

Read this thread:

<URL:http://groups-beta.google.com/group/comp.lang.javascript/browse_thread/thread/21
9168d56980e199/b9f7823d34a7001b?q=%22RobG%22&_done=%2Fgroup%2Fcomp.lang.javascri
pt%2Fsearch%3Fq%3D%22RobG%22%26start%3D60%26scoring%3Dd%26&_doneTitle=Back+to+Se
arch&&d#b9f7823d34a7001b>

Or search for "Dynamically adding onclick to element".

Signature

Rob.

Reply to this Message

RobG - 25 Feb 2005 00:22 GMT

>> How do you dynamically assign a function to an element's event with
>> specific parameters?
[quoted text clipped - 6 lines]
>
> Or search for "Dynamically adding onclick to element".

Here's a little more help, I've implemented the advice given by
Richard Cornford in response to the above post. I was a little
daunted by it when I first read it, but I think I have a better
understanding now.

Each event just prints out its parameters, the internal code
can be replaced with whatever you like.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Dynamically add onclick with parameters</title>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
<script type="text/javascript">

function handleMouseOver(elt, cssClass, strURL) {
var msg = 'handleMouseOver: ' + elt.nodeName;
'handleMouseOver: ' + elt.nodeName
for (var i=0; i<arguments.length; i++) {
msg += '<br> Parameter ' + i
+ ': ' + arguments[i];
}
document.getElementById('msgBox').innerHTML = msg;
}

function handleMouseOut(elt, cssClass) {
var msg = 'handleMouseOut: ' + elt.nodeName;
'handleMouseOut: ' + elt.nodeName + ' : '
for (var i=0; i<arguments.length; i++) {
msg += '<br> Parameter ' + i
+ ': ' + arguments[i];
}
document.getElementById('msgBox').innerHTML = msg;
}

function handleMouseDown(elt, cssClass) {
var msg = 'handleMouseDown: ' + elt.nodeName;
for (var i=0; i<arguments.length; i++) {
msg += '<br> Parameter ' + i
+ ': ' + arguments[i];
}
document.getElementById('msgBox').innerHTML = msg;
}

function handleMouseUp(elt, cssClass, strURL){
var msg = 'handleMouseUp: ' + elt.nodeName;
'handleMouseUp: ' + elt.nodeName + ' : '
for (var i=0; i<arguments.length; i++) {
msg += '<br> Parameter ' + i
+ ': ' + arguments[i];
}
document.getElementById('msgBox').innerHTML = msg;
}

function addClicks(id){
var el = document.getElementById(id);
// ***** Assign Mouse Event Handlers *****

var strTargetURL = 'strTargetURL parameter';

el.onmouseover = function (){
handleMouseOver(this, 'subNavHoverButton', strTargetURL)
};
el.onmouseout = function (){
handleMouseOut(this, 'subNavNormButton')
};
el.onmousedown = function (){
handleMouseDown(this, 'subNavPressButton')
};
el.onmouseup = function (){
handleMouseUp(this, 'subNavHoverButton', strTargetURL)
};
}

</script>

</head>

<body onload="addClicks('targetBtn');">

<button id="targetBtn">A button</button>
<br>
<span id="msgBox"></span>

</body>
</html>

Signature

Rob

Reply to this Message

N. Demos - 28 Feb 2005 20:49 GMT

>> How do you dynamically assign a function to an element's event with
>> specific parameters?
[quoted text clipped - 6 lines]
>
> Or search for "Dynamically adding onclick to element".

RobG,
Thank you for your time and the info. This did help.
Unfortunately, the form of event assignment referenced in the post above
isn't working the way I need it to.

Example:
--------
var listUrls = new Array(3);

listUrls[0] = new String('Page1.html');
listUrls[1] = new String('Page2.html');
listUrls[2] = new String('Page3.html');

var strCssClass = 'buttonNorm';

for(i = 0; i < listUrls.length; i++){
// Create Element Code here ...
objElement = document.CreateElement('TD');

objElement.onmouseover = function(e) {handleMouseOver(e,
strCssClass, listUrls[i]);}
//etc...
}

What appears to be happening when the event handler is called for
each/any element it was assigned, it is called with the last parameters
it was passed in the loop.

In this case, it's called handleMouseOver(e, 'buttonNorm', 'Page3.html')

I do not fully understand why this is occuring. I appears as if there is
only one function being assigned (to all the Elements) within the loop
and, at execution, is utilizing whatever the last set of parameters it
was passed.

However, I have found a solution that does work.

Working Soln:
--------------
var listUrls = new Array(3);

listUrls[0] = new String('Page1.html');
listUrls[1] = new String('Page2.html');
listUrls[2] = new String('Page3.html');

var strCssClass = 'buttonNorm';

for(i = 0; i < listUrls.length; i++){
// Create Element Code here ...
objElement = document.CreateElement('TD');

var strFunctMO = 'handleMouseOver(e, "' + strCssClass + '", "' +
listUrls[i] + '");';

objElement.onmouseover = new Function('e', strFunctMO);
// Other event handler assigns here ...
}

Signature

Change "seven" to a digit to email me.

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / JavaScript / February 2005

How to dynamically assign event handler functs w/ parameters?