homepage Welcome to WebmasterWorld Guest from 54.196.196.62
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Javascript, onMouseover etc.
Events in js code rather than html tags?
Reflection




msg:1476625
 10:54 pm on Jun 27, 2003 (gmt 0)

Instead of having a whole bunch of <a href="#" onMouseover="...> in your html is there a way to declare your onMouseover, or other events, in your js file?

It would save a lot of clutter if this is possible.

Thanks.

 

korkus2000




msg:1476626
 2:27 am on Jun 28, 2003 (gmt 0)

Not that I know of. There are methods for event handlers but they are not supported really well.

HocusPocus




msg:1476627
 11:33 am on Jun 28, 2003 (gmt 0)

If you're not too fussed about supporting older browsers you could do something like

<body onload=init() ...

<a href="#" id=a0>
...

function domouseout () {
//do stuff
}

function domouseover () {
//do stuff
}

function init(){
for (i=0;i<13;i++)
{
eval("a"+i+".onmouseover=domouseover");
eval("a"+i+".onmouseout=domouseout");
}
}

don't ask me why but the id has to start with a letter.

daosmith




msg:1476628
 1:27 pm on Jun 28, 2003 (gmt 0)

The id has to start with a letter because that is how id's are defined by the W3C - 'ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").'

gph




msg:1476629
 3:27 pm on Jun 28, 2003 (gmt 0)

As korkus2000 said this is poorly supported. IE6 doesn't recognize the standard.

Anyway, here's an example I put together to give you an idea. If you want to use this you'd need to improve the sniffing and drop older browsers. The ie5 sniff needs to be on 1 line.

An interesting point, Opera 7 works with both methods. You gotta feel for those Opera programers :)

<html>
<head>
<title></title>
<script>

ie5 = document.all && document.getElementById && navigator.userAgent.toLowerCase().indexOf('opera')==-1?1:0

onload = function() {
links = document.getElementsByTagName('a')
links_length = links.length
for (var i=0; i<links_length; i++) {
if (ie5) {
links[i].attachEvent('onmouseover', href_on_mouse_over)
links[i].attachEvent('onmouseout', href_on_mouse_out)
} else {
links[i].addEventListener('mouseover', href_on_mouse_over, false)
links[i].addEventListener('mouseout', href_on_mouse_out, false)
}
}
output = document.getElementById('output-div')
}

function href_on_mouse_over() {
output.value = 'over'
}

function href_on_mouse_out() {
output.value = 'out'
}

</script>
</head>

<body>

<a href="some_page.htm">link 1</a>

<p></p>

<a href="other_page.htm">link 2</a>

<p></p>

<input type="text" id="output-div">

</body>
</html>

gph




msg:1476630
 6:40 pm on Jun 28, 2003 (gmt 0)

I just stumbled on a "links" colection. The array name in my example should be changed.

[msdn.microsoft.com...]

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved