How to dynamically assign event handler functs w/ parameters?

N

N. Demos

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;

// ***** 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);
}
}
 
R

RobG

RobG said:
N. Demos said:
How do you dynamically assign a function to an element's event with
specific parameters?
Click to expand...
[...]

Read this thread:

<URL:http://groups-beta.google.com/group..._doneTitle=Back+to+Search&&d#b9f7823d34a7001b>


Or search for "Dynamically adding onclick to element".
Click to expand...

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;
}
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;
}
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;
}
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;
}
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>
 
N

N. Demos

RobG said:
N. Demos said:
How do you dynamically assign a function to an element's event with
specific parameters?
Click to expand...
[...]

Read this thread:

<URL:http://groups-beta.google.com/group..._doneTitle=Back+to+Search&&d#b9f7823d34a7001b>


Or search for "Dynamically adding onclick to element".
Click to expand...

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);}
//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 + '");';

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

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Dynamically assign event handler functs w/ parameters 0
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Passing event from dynamically created element and event handler? 2
Checking dynamically populated data using ajax with user entered value 5
Dynamically Assigning OnChange Handler 2
Image shifts to the right when export the page to pdf 4
Assign onkeypress-function to dynamically created input-boxes 1
I am trying to make an audio player, how do I get the selected file to be playable? 5

Members online

No members online now.
Total: 36 (members: 0, guests: 36)
Robots: 470

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,054
Latest member
TrimKetoBoost

Latest Threads

Top