Optimizing code for span mouseover invocation.

A

Alex

On my page I have a lot string like this:
<span onmouseover="callMe(this)" onmouseout="callMe(null)" >abc1</span>
<span onmouseover="callMe(this)" onmouseout="callMe(null)" >abc2</span>
<span onmouseover="callMe(this)" onmouseout="callMe(null)" >abc3</span>
<span onmouseover="callMe(this)" onmouseout="callMe(null)" >abc4</span>

How can I optimize it?
Is it possible to move this definition what to do to style/css or some
other common place?

And have something like this:
<span id="callMe">abc</span>
 
J

Julian Turner

Alex said:
On my page I have a lot string like this:
<span onmouseover="callMe(this)" onmouseout="callMe(null)" >abc1</span>
<span onmouseover="callMe(this)" onmouseout="callMe(null)" >abc2</span>
<span onmouseover="callMe(this)" onmouseout="callMe(null)" >abc3</span>
<span onmouseover="callMe(this)" onmouseout="callMe(null)" >abc4</span>

How can I optimize it?
Is it possible to move this definition what to do to style/css or some
other common place?

And have something like this:
<span id="callMe">abc</span>

Yes it is.

Firstly, I would perhaps choose a different id name, because that could
conflict with your function name callMe().

Secondly, because events "bubble" up the node tree, they end up at the
document node.

You can therefore attach a handler to the document node as follows:-

document.onmouseover=function(theEvent)
{
var theEvent=(theEvent)? theEvent||window.event;
var
theTarget=(theEvent.target)?theEvent.target:theEvent.srcElement;

if (theTarget.id=="mySpan")
{
callMe(theTarget);
return;
}
};

document.onmouseout=function(theEvent)
{
var theEvent=(theEvent)? theEvent||window.event;
var
theTarget=(theEvent.target)?theEvent.target:theEvent.srcElement;

if (theTarget.id=="mySpan")
{
callMe(null);
return;
}
};

Julian
 
R

RobG

Alex said:
On my page I have a lot string like this:
<span onmouseover="callMe(this)" onmouseout="callMe(null)" >abc1</span>
<span onmouseover="callMe(this)" onmouseout="callMe(null)" >abc2</span>
<span onmouseover="callMe(this)" onmouseout="callMe(null)" >abc3</span>
<span onmouseover="callMe(this)" onmouseout="callMe(null)" >abc4</span>

How can I optimize it?
Is it possible to move this definition what to do to style/css or some
other common place?

And have something like this:
<span id="callMe">abc</span>

Following on from Julian's idea, this one fires mouseover/out for any
element with class ('doMoMo') within the page. Note that you can add
multiple classes to elements and they don't have to be defined in a
stylesheet:


<script type="text/javascript">

// This is the important bit - handles the mouseover/out
// And calls the appropriate function
function doOverOut(e)
{
var e = e || window.event;
var tgt = e.target || e.srcElement;
if (tgt && tgt.className && /\bdoMoMo\b/.test(tgt.className)){
('mouseover' == e.type)? mOver(tgt) : mOut(tgt);
}
}

// Just a dummy mouseover function
function mOver(el)
{
// mouseover function
document.getElementById('xx').innerHTML =
'Mouse<b>over</b> fired';
el.style.backgroundColor = '#ccccff';
}

// Just a dummy mouseout function
function mOut(el)
{
// mouseout function
document.getElementById('xx').innerHTML =
'Mouse<b>out</b> fired';
el.style.backgroundColor = '#ffffff';
}

// Add mousever/out functions to the document
window.onload = function(){
var _Bdy = document.body || document.documentElement;
_Bdy.onmouseover = doOverOut;
_Bdy.onmouseout = doOverOut;
}
</script>

<p>This is some plain text. <span class="someClass doMoMo">Here is a
doMoMo span</span> This is not a doMoMo bit<span
class="someOtherClass doMoMo">Here is another doMoMo
span</span></p>

<div id="xx" class="doMoMo"></div>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top