Help with HTML code cleaning (javascript)

[oracle]

I am really looking for this thing for long, but unable to figure out how can this be done.

In general we have something like this:

<div id="act" onmouseover="mouseover(this)" onmouseout="mouseout(this)" onclick="click(this)"/>

But this really mess up the whole code. I checked some of the professional site codes, and they handle it in someway that they don't need to write those event handlers along with html.

Though I am not sure how to achieve this.

Can someone please post a short code, javascript file corresponding to above thing, so that my code looks like this:

<div id="act"/>

function takeaction() {
  // Takes care of everything which comes not only from div id="act" but also the other id's
}

Thanks in advance,
Imoracle

 

[willemvo]

actually there is no way of doing that unless you use PHP

 

[marshian]

@willemvo:
The actual source the user sees has to be a clean, so PHP is not an option.

You can set events after the page has loaded:
Suppose we have your example:

<div id="act"/>

And we want it to have the same behaviour as:

<div id="act" onclick="dostuff()" />

Then this code should make the first code equal to the second:

document.onload = initEvents;

function initEvents() {
document.getElementById("act").onclick = dostuff;
//Note that you cannot use "dostuff()" or dostuff() here,
//nor can you add any params to the function call.
//(according to: http://www.chovy.com/web-development/javascript-dynamically-change-onclick-event/)
}

- Marshian