Question

34

Adding event as parameter within function, using addEventListener (Doesn't work in Firefox/IE)

rated 0 times [ 39] [ 5] / answers: 1 / hits: 15924 / 13 Years ago, mon, september 12, 2011, 12:00:00

<html>

<head>

<title>FML</title>



<script type="text/javascript">



function function1(e, div) {

div.innerHTML="this works"

document.getElementById('myspan').innerHTML= 'x-pos on click: ' + e.clientX

div.addEventListener("mousemove", function(){test(event, this)}, true);

}



function test(e, div) {

div.innerHTML+='<br/>so does this'

//This doesn't work. Can't add event as a parameter to function that has to be executed when using addEventListener

document.getElementById('myspan2').innerHTML= 'y-pos on move: ' + e.clientY

}



</script>

</head>

<body>

<span id="myspan">&nbsp;</span>

<span id="myspan2">&nbsp;</span>

<div style="width:100px;height:100px;background-color:blue;overflow:hidden;"  onclick="function1(event, this)">

</body>

</html>

Click on the blue div.

I want to add the event mouseover, have it execute the test()-function which should contain following parameters: this, event

When the function test(e, div) is called I keep getting an "event is undefined" error in Firefox and IE, although ironically enough it works perfectly in Chrome and Safari.

Any way I can add the event parameter by using addEventListener? I can get it to work with window.event in Chrome and Safari, but this is the exact setup that I want. I've been googling and trial/erroring for a while now, without success... so FML :/ Any tips/hints/... besides shooting myself in the head?

I know jQuery would probably solve all this, but I want to be proficient in Javascript before migrating to jQuery. Or should I migrate anyway?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

matteo

Add To Favorites

Follow

Total Points: 81

Total Questions: 100

Total Answers: 96

Location: Honduras

Member since Sat, Jul 24, 2021

3 Years ago

answered 13 Years ago jaelyn · Accepted Answer

div.addEventListener(mousemove, function(){test(event, this)}, true);

Well, of course you get event is undefined ! When the mousemove event triggers, your event handler is called:

function(){test(event, this)}

There are two ways to reach the event information object. Either it is passed to the event handler as an argument, or it can be found in window.event.

Suppose the second case holds. As there is no local variable named event in your function, nor is there such variable in function1 that calls it, the browser looks if there is an event defined in the global object. In JavaScript, the global object is called window, so your function is interpreted as

function(){test(window.event, this)}

and it works.

However, as I noted before, in some browsers, the event information is passed in the argument. So your event handler probably wanted to look like this:

function(event){test(event, this)}

otherwise the event passed to test() would be undefined. So, this is how to make a cross-browser handler:

function(event) {

  if (!event) // i.e. the argument is undefined or null

      event = window.event;



  test(event, this);

}

The second problem is that addEventListener() doesn't work in older IEs (it does in IE9, though). For older IEs, you have to use a similar function called attachEvent(). Or, if you only attach one handler, you can do it the simple way

div.onmousemove = function() {...};