I wonder if there is a DOM attribute for javascript events

**Dal** · 07-21-2008, 10:41 PM

Im sure the title didnt really explain so here goes...

I can access a html element via document.getElementById('something') and I can reach DOM attributes from this so;

Code:

document.getElementById('something').style.display
//or
document.getElementById('something').id
document.getElementById('something').innerHTML
//ect...

Im wondering if I can access the onclick and other events which are written to the element ie;

Code:

document.getElementById('something').onclick = "mouseclickfunc(mypassed,variables)";
//or
document.getElementById('something').onmouseover = "somefunc(some,thing);";
//ect...

which would write to the document;

HTML Code:

<div id="something" onclick="mouseclickfunc(mypassed,variables);" onmouseover="somefunc(some,thing);">

I need to replace the function names for onclick and other events as the element roles change in another part of the site. I could use php to search the html and replace that way but I thought Id check to see if this was available. I know that the document.getElementById('something').onclick is used for actually applying an event to the element so I image its not going to be what my example.

Anyone know what I mean and if it can be done?

Thanks
Dal

**rangana** · 07-22-2008, 01:13 AM

Maybe you mean something like this:

HTML Code:

<script type="text/javascript">
window.onload=function()
{
var something=document.getElementById('something');
something.onclick=function(){mouseclickfunc('mypassed','variables');}
something.onmouseover=function(){somefunc('some,thing');}
}
function mouseclickfunc(a,b){alert('First value is: '+a);alert('Second value is: '+a);}
function somefunc(a,b){alert('First value is: '+a);alert('Second value is: '+a);}
</script>
<div id="something">test</div>

**Dal** · 07-22-2008, 01:41 AM

Thanks rangana but unfortunatly I need the events to be part of the html code. For example when I use the javascript function to apply css attributes the values are rewrote to the html.

<div id="something" style="Background-Color:#FFFFFF"></div>

document.getElementById('something').style.backgroundColor = "#000000" will result in;

<div id="something" style="Background-Color:#000000"></div>

Can it be done or do I have to use string search and replace on a html block code?

Thanks
Dal

**rangana** · 07-22-2008, 01:46 AM

I'm confused (nothing new)

The code I've posted on post#2 translates to your goal:

HTML Code:

<div id="something" onclick="mouseclickfunc(mypassed,variables);" onmouseover="somefunc(some,thing);">

**jscheuer1** · 07-22-2008, 02:22 AM

I thought at first that this might be a quasi religious question (see recent posts for more explanation on that).

The DOM events of an element are a part of an element's properties.

Except when they are assigned via attachEvent or addEventListener.

I think that this is a huge hole in DOM level 2 that will be corrected at some time in the future.

So say you have:

Code:

<a id="example" onclick="alert(this.href);return false;" href="some.htm">whatever</a>

This will work (we are focusing our attention on the 'Check' button):

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function getEvent(id){
alert(document.getElementById(id).onclick);
}
</script>
</head>
<body>
<a id="example" onclick="alert(this.href);return false;" href="some.htm">whatever</a><br>
<input type="button" value="Check" onclick="getEvent('example');">
</body>
</html>

Or this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function getEvent(id){
alert(document.getElementById(id).onclick);
}
window.onload = function(){
document.getElementById('example').onclick = function(){
alert(this.href);return false;
}
}
</script>
</head>
<body>
<a id="example" href="some.htm">whatever</a><br>
<input type="button" value="Check" onclick="getEvent('example');">
</body>
</html>

But not this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function getEvent(id){
alert(document.getElementById(id).onclick);
}
function giveHref(e){
e = e? e : window.event;
var t = e.target? e.target : e.srcElement;
alert(t.href);
if (e.preventDefault)
e.preventDefault();
return false;
}
window.onload = function(){
if(typeof window.addEventListener!='undefined')
document.getElementById('example').addEventListener('click', giveHref, false);
else if(typeof window.attachEvent!='undefined')
document.getElementById('example').attachEvent('onclick', giveHref);
};
</script>
</head>
<body>
<a id="example" href="some.htm">whatever</a><br>
<input type="button" value="Check" onclick="getEvent('example');">
</body>
</html>

But the onclick event of the a tag will be identical in all three examples.

**Dal** · 07-22-2008, 02:34 AM

Originally Posted by rangana

I'm confused (nothing new)

The code I've posted on post#2 translates to your goal:

HTML Code:

<div id="something" onclick="mouseclickfunc(mypassed,variables);" onmouseover="somefunc(some,thing);">

rangana : This is what I see when I look at the generated source code;

HTML Code:

<html><head>

<script type="text/javascript">
window.onload=function()
{
var something=document.getElementById('something');
something.onclick=function(){mouseclickfunc('mypassed','variables');}
something.onmouseover=function(){somefunc('some,thing');}
}
function mouseclickfunc(a,b){alert('First value is: '+a);alert('Second value is: '+a);}
function somefunc(a,b){alert('First value is: '+a);alert('Second value is: '+a);}
</script>
</head><body>
<div id="something">test</div>
</body></html>

This is what I wanted though;

HTML Code:

<html><head>

<script type="text/javascript">
window.onload=function()
{
var something=document.getElementById('something');
something.onclick=function(){mouseclickfunc('mypassed','variables');}
something.onmouseover=function(){somefunc('some,thing');}
}
function mouseclickfunc(a,b){alert('First value is: '+a);alert('Second value is: '+a);}
function somefunc(a,b){alert('First value is: '+a);alert('Second value is: '+a);}
</script>
</head><body>
<div id="something" onclick="mouseclickfunc(mypassed,variables);" onmouseover="somefunc(some,thing);">test</div>
</body></html>

jscheuer1, I think Im going to have to run the code you gave me there because I dont see what your point is... brb with my response on that one

Thanks
Dal

**rangana** · 07-22-2008, 02:40 AM

Ah, I see your point Dal, but I don't think it's possible with JS. Remember that it's client-side. what you're after could be done, and will be made possible via server-side.

Hope that makes sense.

**Dal** · 07-22-2008, 02:44 AM

jscheuer1: Uh? its not changing anything in the html element?

Is my question not explained enough. Think of it this way;

I want to modify this onclick function from

<div id="Anything" onclick="Oldfunction();"></div>

to;

<div id="Anything" onclick="Newfunction();"></div>

without rewitting the parent div. I need to access this part

<div id="Anything" onclick="Oldfunction();"></div>

via a DOM command. How do I address the document.getElementById('Anything') to access the string contained within the onclick="" param?

so If I wanted to change it to "ChickenDinner" I could simply write something like

document.getElementById('Anything').onclick.string("ChickenDinner") (<-- I obvously made this up but its more relative than what you guys seem to be aiming at)

I hope I made myself clear

Thanks
Dal

**Dal** · 07-22-2008, 02:47 AM

Originally Posted by rangana

Ah, I see your point Dal, but I don't think it's possible with JS. Remember that it's client-side. what you're after could be done, and will be made possible via server-side.

Hope that makes sense.

Im sure its possible just handles the same as any other DOM but I think you answered my question, its not been supported yet!

Thanks for your time. Sorry for the confussion.

Oh well, Ill handle the whole thing via PHP. Would have been a little neater if JS could have embedded and built its own code.

Cool
Thanks agian
Dal

**rangana** · 07-22-2008, 02:55 AM

Oh, wait, try this:

Code:

<script type="text/javascript">
window.onload=function()
{document.getElementById('trig').onclick=function()
	{
	var prnt=document.getElementById('Anything');
	prnt.removeAttribute('onclick');
	prnt.onclick=function(){Newfunction();};
	}
}
function Oldfunction()
{alert('This is the old function');}
function Newfunction()
{alert('This is the new function');}
</script>
<div id="Anything" onclick="Oldfunction();">
Contents
</div>
<input type="button" value="Change the function of Anything div to new" id="trig">