By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,636 Members | 1,190 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,636 IT Pros & Developers. It's quick & easy.

Optimizing code for span mouseover invocation.

P: n/a
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>

Oct 20 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a

Alex wrote:
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:theEve nt.srcElement;

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

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

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

Julian

Oct 20 '05 #2

P: n/a
Alex wrote:
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>

--
Rob
Oct 21 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.