All geek questions in one place

Adding an event as a parameter inside a function using addEventListener (does not work in FF / IE). Javascript

<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 a mouseover event, execute the test () function, which should contain the following parameters: this, event

When the test (e, div) function is called, I continue to get the "event is undefined" error in firefox and IE, although, ironically, it works fine in Chrome and Safari.

In any case, can I add an event parameter using addEventListener? I can make it work with window.event in chrome and safari, but this is the exact setting I want. I've been looking for Google / trial version / errors for a long time, without success ... so FML: / Any hints / hints / ... besides shooting in the head?

I know jquery will probably solve all this, but I want to be experienced in javascript before porting to jQuery. Or do I care to migrate?

Thank you and welcome, p.

+6
source share
2 answers
 div.addEventListener("mousemove", function(){test(event, this)}, true);

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

 function(){test(event, this)}

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

Suppose that the second case holds. Since your function does not have a local variable named event , and there is no such variable in function1 that calls it, the browser looks if there is an event 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 earlier, in some browsers event information is passed in an argument. Therefore, your event handler would probably want to look like this:

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

otherwise the event passed in test() will be undefined. So, how to make a cross browser handler:

 function(event) { if (!event) // ie the argument is undefined or null event = window.event; test(event, this); }

The second problem is that addEventListener() does not work in older IEs (however, in IE9). For older IEs, you should use a similar function called attachEvent() . Or, if you attach only one handler, you can do it in a simple way.

 div.onmousemove = function() {...};
+11
source

In some browsers, such as Firefox, the event should be passed as a parameter, so you need 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 pay attention to the event property, passed as a parameter to the function added to the second line.

for old IE ver attachEvent() ;

 div.attachEvent("onclick", function(event){test(event, this)});

Note that attachEvent has been replaced in modern standard js addEventListener and now almost all modern browser support.

Here http://caniuse.com/#feat=addeventlistener you can see the compatibility table.

+1
source

Source: https://habr.com/ru/post/897188/

More articles:


All Articles