Adding event as parameter within function, using addEventListener (Doesn't work in Firefox/IE)
Solution 1
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() {...};
Solution 2
In some browsers like Firefox the event has to be passed as a parameter, so you have to replace this code
div.addEventListener("mousemove", function(){test(event, this)}, true);
with this
div.addEventListener("mousemove", function(event){test(event, this)}, true);
Compare carefully the two lines of code and notice the event property passed as parameter of the function added into the second row.
for old IE ver attachEvent()
has to be used;
div.attachEvent("onclick", function(event){test(event, this)});
Notice that attachEvent has been replaced in modern standard js with addEventListener and now almost all modern browser support that.
Here http://caniuse.com/#feat=addeventlistener is possible to see compatibility table.
Related videos on Youtube
Comments
-
Pascalculator almost 2 years
<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"> </span> <span id="myspan2"> </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 thetest()
-function which should contain following parameters: this, eventWhen 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 withwindow.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?
-
ImpBesides my answer, thumbs up for "I know jquery would probably solve all this, but I want to be proficient in javascript before migrating to jQuery." This is the right way to learn a language. And it seems rare in JS community. Because I've seen people, here in SO, who were even asking for a special construct in jQuery to be made to substitute if-then-else... :-D
-
-
Pascalculator almost 12 yearsWow, thanks ! This was bothering me for way too long, never thought this would ever get solved. Seems like you're a purist :) I've migrated to jQuery in the meanwhile though, but I still (luckily) use JavaScript for the smaller stuff so I don't have to load an entire (jQuery) library.
-
Pasha Skender over 7 yearsCan the event listener be removed with this approach? Otherwise what is the point of nesting a named function inside an anonymous function in this way?