javascript event problem before window fully loaded

[abb]

I have this onmouseover event on some elements, eg:
<div onmouseover="run_code(this)" id="foo1">Block</div>

My problems is, as the page is loading, the above block shows up on the page, if my mouse is right over it as the page is rendering, there will be a Javascript error saying that another element required by code is not defined, its there but only its not yet loaded at that point, if I mouseover after the full page loads, no problems.

How can I get the mouseover event on the element to not trigger before page fully loads? something to do with windows.onload?

Thanks!

[Kravvitz]

Use unobtrusive JavaScript instead of inline event handlers.

The Behavior Layer
Separating behavior and structure
Behavioral Separation
Unobtrusive JavaScript
DOM Scripting - Sample chapter: Best Practices
Accessible DHTML

[abb]

I was gravitating towards unobtrusive way, declare it in window.onload = function () { ... } yes?

But is there a way to do it inline style like this? Anybody have this problem with inline event trigger?

[hegelund]

Hi abb

Read the articles suggested by Kravvitz. I wonder if he spend all day searching for good links to the rest of us :-)

You could do it this way separating content and behavior:

<div id="foo1">Block</div>

and put this in a js file that is loaded AFTER the HTML on your page:

var divFoo1 = document.getElementById("foo1");
divFoo1.onmouseover = function() {...the code that should run when mouse over...};

and a more modern way (DOM2):

document.getElementById("foo1").addEventListener("mouseover", name_of_function_to_run, true);

But beware: Old browsers may not understand the DOM2 way.

You could make a shortcut and use a javascript library instead of create all, lets call it usual, code yourself. I use http://www.cross-browser.com. I started using it after I realised I would be 90 before I had written all the functions I need...

Or search the web for other libraries.

Michael

[Kravvitz]

I was gravitating towards unobtrusive way, declare it in window.onload = function () { ... } yes?

That's the simplest way. I recommend using a more robust solution, like this one.

But is there a way to do it inline style like this? Anybody have this problem with inline event trigger?

I'm not sure what you're asking.

put this in a js file that is loaded AFTER the HTML on your page

It's easier to add event handlers to elements via a window.onload handler.

and a more modern way (DOM2)

But beware: Old browsers may not understand the DOM2 way.

IE (including IE7) doesn't support DOM2 Events.

You could make a shortcut and use a javascript library instead of create all, lets call it usual, code yourself.

JS Libraries lead to code bloat.

Read the articles suggested by Kravvitz. I wonder if he spend all day searching for good links to the rest of us :-)

I have a text file where I keep the links to articles on various topics in a somewhat-categorized order.

[abb]

Thanks so much hegelund, Kravvitz! You guys are gold! (pls but don't quote this part cos i'll feel gay j/k)

Initially I thought those links on Kravvitz's post there was part of his sig, Kravvitz they are awesome!!

Originally Posted by abb
But is there a way to do it inline style like this? Anybody have this problem with inline event trigger?

I was curious if there was a way to halt events from firing before page fully loads?

For example:
<div onmouseover="do_foo(this)"> ... </div>

Will this always run as soon as it is rendered on the page and there is a mouse hovering over the element? There is no way to defer this until page fully loads?

(You guys already answered this.)

Originally Posted by hegelund
You could make a shortcut and use a javascript library instead of create all, lets call it usual, code yourself. I use http://www.cross-browser.com. I started using it after I realised I would be 90 before I had written all the functions I need...

This particular project is for intranet, so not much surprises on browser type, I am using Prototype actually, pretty new at it, its all confusing right now, but if its only declaring element events, I'll just straight away code it.

Originally Posted by Kravvitz

Originally Posted by hegelund
and a more modern way (DOM2)

But beware: Old browsers may not understand the DOM2 way.

IE (including IE7) doesn't support DOM2 Events.

IE ... sadness

[hegelund]

I have a text file where I keep the links to articles on various topics in a somewhat-categorized order.

Good way to do it. I have immediately started my own collection of links...

Michael