Passing 'event' argument to addEventListener() 1

dismayldream · Oct 4, 2007

I'm trying to bind an event argument to an anonymous function that encapsulates a call to class method that requires access to the event object. The problem is if I place the word 'event' or 'e' in the anonymous function that wraps my class method call - the JS just errors citing e/event as undefined. This doesn't happen in IE. If I embed the class method call directly in the XHTML element's onmouseover/onmousemove events (E.g. <span onmouseover="clueTip.showTooltip(event, clueTip);">Blah</span>), I can pass the reserved word 'event' without incidence. I'm sure it's something to do with scope and my misunderstanding of how JavaScript is working with event - any clarification would be great. I've outlined a snippet of the code below:

Code:

// Occurs in body.onload()
              
elsToTip = document.getElementsByTagName("span");
if(elsToTip[y].addEventListener)
{
	// for Firefox (Javascript errors citing 'event' as undefined)
	elsToTip[y].addEventListener("mousemove",function(){ clueTip.showTooltip(event, clueTip);}, false);
	elsToTip[y].addEventListener("mouseover",function(){ clueTip.showTooltip(event, clueTip);}, false);		
	elsToTip[y].addEventListener("mouseout",function(){clueTip.hideTooltip(event, this, clueTip);}, false);
}
else if(elsToTip[y].attachEvent) 
{
	// for IE (This works - event is passed in)
	elsToTip[y].attachEvent("onmousemove",function(){clueTip.showTooltip(event, clueTip);});
	elsToTip[y].attachEvent("onmouseover",function(){clueTip.showTooltip(event, clueTip);});
	elsToTip[y].attachEvent("onmouseout",function(){clueTip.hideTooltip(event, this, clueTip);});
}  

(...)

adam0101 · Oct 4, 2007

I thought I saw somewhere that non-IE browsers pass the event to the handler in the first argument. This is just a guess...

Non-IE:
[tt]function([red]e[/red]){ clueTip.showTooltip([red]e[/red], clueTip)[/tt]

Adam
http://adameslinger.blogspot.com/

j4606 · Oct 4, 2007

this works for me. I separated the functions to make it easier to read. Also I would try to use lazy function definition pattern for something like this.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
<script language="JavaScript">

function mouseDown(ev){
	showTooltip(ev);
}

function foofunction(){
	elsToTip = document.getElementsByTagName("span");
	if(elsToTip[1].addEventListener){
		elsToTip[1].onmousedown = mouseDown;

	}

}

function showTooltip(e){
	alert(e);
}
</script>
<body onLoad="foofunction()">
    <span name="span1" id="spanA">esfsda</span>
    <span name="span2" id="spanB">fdasZ</span>
    <span name="span3" id="spanC">fdasf</span>
    <span name="span4" id="spanD">fdafdas</span>
    <span name="span5" id="spanE">fdsafdsa</span>
 </body>
</HTML>

j4606 · Oct 4, 2007

oh yah as for explanation event is not defined means u havnt defined the event. Probobly works in ie cause ie has a global event. Try this out to see wut im talking about.

Code:

<html><script>alert(event);</script></html>

ie will be differnt than ff. my guess is if you want the code to work your way your going to need to define event, e or w/e.

j4606 · Oct 4, 2007

So to make your code work as is pass in the event in so it's defined, sorry about the many responses im at work, so i post inbetween work related things.
elsToTip[y].attachEvent("onmouseout",function(event){clueTip.hideTooltip(event, this, clueTip);});

j4606 · Oct 4, 2007

oh hey thats what adam said, :< have a star on me(cause im slow)

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Passing 'event' argument to addEventListener() 1

dismayldream

Programmer

adam0101

Programmer

j4606

MIS

j4606

MIS

j4606

MIS

j4606

MIS

Similar threads

Part and Inventory Search

Sponsor