...

View Full Version : In-code events



Shaffer
12-30-2006, 01:07 PM
Hello,
how do I use events in-code?
For instance, if I have created an object and I want it to change color when mouse goes over it; how do I do that?



Thanks,
Shaffer.

TripperTreats
12-30-2006, 01:23 PM
If it's a div tag you want to affect, you would write this for example:

<div onmouseover="this.style.backgroundColor = 'blue';" onmouseout="this.style.backgroundColor = 'red';">......

Here, red is the normal color of the div, and blue is what it changes to only when the mouse is hovered over it.

Shaffer
12-30-2006, 06:24 PM
That I know, thanks. ;)
What I meant is...
I have created an object that I want it's properties to change onEvents.



Thanks,
Shaffer.

david_kw
12-30-2006, 07:04 PM
It can be set through oElement.style.cssText as you can see if you try the following example.

Try out this.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Set CSS in New Element</title>
<script type="text/javascript">
function doIt() {
var d = document.createElement("span");
d.style.cssText = "color:blue; background-color:yellow";
d.innerHTML = "New Element";

var adiv = document.getElementById("adiv");
adiv.appendChild(d);
}
</script>
</head>
<body>
<div>
<button onclick="doIt();">Create New Element</button>
<br />
<div id="adiv"> </div>
</div>
</body>
</html>


david_kw

david_kw
12-31-2006, 01:33 AM
And with additional mouseover and mouseout events in case that was your question instead of the cssText part.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Set CSS in New Element</title>
<script type="text/javascript">
function doIt() {
var d = document.createElement("span");
d.style.cssText = "color:blue; background-color:yellow";
d.innerHTML = "New Element";
d.onmouseover = function () { this.style.cssText = "background-color:lightgreen"; }
d.onmouseout = function () { this.style.cssText = "background-color:yellow"; }

var adiv = document.getElementById("adiv");
adiv.appendChild(d);
}
</script>
</head>
<body>
<div>
<button onclick="doIt();">Create New Element</button>
<br />
<div id="adiv"> </div>
</div>
</body>
</html>


david_kw

Shaffer
12-31-2006, 09:48 PM
Hey,
Thanks alot so much. I really needed this. :)

Kor
01-01-2007, 09:12 AM
I would have been consequent and would have used DOM methods all over (innerHTML is not a standard DOM method). And I would have changed directly the CSS property, not the entire CSSText, otherwise, in your example, you have set useless the font color as later onmouseover you change the entire CSSText (not only the background color).
On more note: If you decided to use an XHTML doctype, as a general rule you'd better isolate the javascript code inside a CDATA island, otherwise, if you would have used operators like < > &, the XML would have consider it literally as parts of it's coding, and that will bring you an error:


<script type="text/javascript">
/*<![CDATA[*/
function doIt() {
var d = document.createElement("span");
d.style.cssText = "color:blue; background-color:yellow";
d.appendChild(document.createTextNode("New Element"));
d.onmouseover = function () { this.style.backgroundColor = "lightgreen"; }
d.onmouseout = function () { this.style.backgroundColor = "yellow"; }

var adiv = document.getElementById("adiv");
adiv.appendChild(d);
}
/*]]>*/
</script>

On the other hand, I would have had rather written two CSS classes and switch them onmouseover/onmouseout, to keep content separate from behaviour:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Set CSS in New Element</title>
<script type="text/javascript">
/*<![CDATA[*/
function doIt() {
var d = document.createElement('span');
d.className='rollout';
d.appendChild(document.createTextNode('New Element'));
d.onmouseover = function(){this.className='rollon'}
d.onmouseout = function(){ this.className='rollout'}
var adiv = document.getElementById('adiv');
adiv.appendChild(d);
}
/*]]>*/
</script>
<style type="text/css">
/*<![CDATA[*/
.rollon{
color:blue;
background-color:lightgreen;
}
.rollout{
color:blue;
background-color:yellow;
}
/*]]>*/
</style>
</head>
<body>
<div>
<button onclick="doIt();">Create New Element</button>
<br />
<div id="adiv"></div>
</div>
</body>
</html>

david_kw
01-01-2007, 08:05 PM
All good points.

As for innerHTML, it seems very well supported and I've read it is quite a bit faster. So do you avoid using it altogether? Or do you ever use it when it has a benefit over the existing standard DOM methods?

Thanks.

david_kw

Kor
01-01-2007, 08:26 PM
Well, yes, innerHTML is a quite useful method, and now is crossbrowser. Yes, is faster, in case a lot of elements are to be appended. It depends only what you are using it for. If you need to simply display new elements, is good. If you want to really add new elements in the DOM tree (and perhaps handle them dynamically later) DOM methods are indicated.

It's just that is somehow better to use a standard method, and I am used to think on DOM first. Anyway, it is no harm to use innerHTML, at least so far.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum