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

How to dynamically assign event handler functs w/ parameters?

P: n/a
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('Sub Button ' + (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);
}
}

--
Change "seven" to a digit to email me.
Jul 23 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
N. Demos wrote:
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/219168d56980e199/b9f7823d34a7001b?q=%22RobG%22&_done=%2Fgroup%2Fcom p.lang.javascript%2Fsearch%3Fq%3D%22RobG%22%26star t%3D60%26scoring%3Dd%26&_doneTitle=Back+to+Search& &d#b9f7823d34a7001b>

Or search for "Dynamically adding onclick to element".

--
Rob.
Jul 23 '05 #2

P: n/a
RobG wrote:
N. Demos wrote:
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/219168d56980e199/b9f7823d34a7001b?q=%22RobG%22&_done=%2Fgroup%2Fcom p.lang.javascript%2Fsearch%3Fq%3D%22RobG%22%26star t%3D60%26scoring%3Dd%26&_doneTitle=Back+to+Search& &d#b9f7823d34a7001b>
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>


--
Rob
Jul 23 '05 #3

P: n/a
RobG wrote:
N. Demos wrote:
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/219168d56980e199/b9f7823d34a7001b?q=%22RobG%22&_done=%2Fgroup%2Fcom p.lang.javascript%2Fsearch%3Fq%3D%22RobG%22%26star t%3D60%26scoring%3Dd%26&_doneTitle=Back+to+Search& &d#b9f7823d34a7001b>
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 ...
}

--
Change "seven" to a digit to email me.
Jul 23 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.