Best IT Recipes

MSIE and addEventListener problem in Javascript?

document.getElementById('container').addEventListener('copy',beforecopy,false );

In Chrome / Safari above, the "beforecopy" function will be executed when copying the content on the page. MSIE should also support this functionality, but for some reason I get this error:

"The object does not support this property or method"

Now I understand that Internet Explorer will not play with the body of a node, but I thought that providing the node by ID would work fine. Does anyone have any ideas on what I'm doing wrong? Thanks in advance.

** Bonus points for anyone who can tell me what is suitable for the 3rd parameter "False".

+74
javascript internet-explorer addeventlistener
Nov 08 '09 at 4:35
source share
8 answers

In IE, you should use attachEvent , not the standard addEventListener .

A common practice is to check the addEventListener method is addEventListener and used, otherwise use attachEvent :

 if (el.addEventListener){ el.addEventListener('click', modifyText, false); } else if (el.attachEvent){ el.attachEvent('onclick', modifyText); }

You can make a function:

 function bindEvent(el, eventName, eventHandler) { if (el.addEventListener){ el.addEventListener(eventName, eventHandler, false); } else if (el.attachEvent){ el.attachEvent('on'+eventName, eventHandler); } } // ... bindEvent(document.getElementById('myElement'), 'click', function () { alert('element clicked'); });

You can run the example of the above code here .

The third argument to addEventListener is equal to useCapture ; if true, this means that the user wishes to initiate event capture .

+172
Nov 08 '09 at 4:40
source share
— -

If you are using jQuery 2.x, add the following to

 <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge;" /> </head> <body> ... </body> </html>

It worked for me.

+28
Aug 19 '14 at 15:05
source share

Internet Explorer (IE8 and below) does not support addEventListener(...) . It has its own event model using the attachEvent method. You can use this code:

 var element = document.getElementById('container'); if (document.addEventListener){ element .addEventListener('copy', beforeCopy, false); } else if (el.attachEvent){ element .attachEvent('oncopy', beforeCopy); }

Although I recommend that you avoid writing your own event processing shell and use the JavaScript framework (for example, jQuery , Dojo , MooTools , YUI , Prototype , etc.) instead and do not create a fix for it yourself.

By the way, the third argument in the W3C event model is related to the difference between bubbling and capture events . In almost every situation, you want to handle events when they bubble, and not when they are captured. This is useful when using event delegation in things like the "focus" of events for text fields that don't bubble.

+4
Nov 08 '09 at 4:45
source share

try adding

 <meta http-equiv="X-UA-Compatible" content="IE=edge">

immediately after the opening head tag

+3
Aug 19 '14 at 7:55
source share

As in IE11, you need to use addEventListener . attachEvent deprecated and throws an error.

+1
Nov 19 '13 at 9:32
source share

The problem is that IE does not have a standard addEventListener method. IE uses its own attachEvent , which does almost the same thing.

A good explanation of the differences as well as the third parameter can be found in quirksmode .

0
Nov 08 '09 at 4:41
source share

As PPK points here , in IE you can also use

 e.cancelBubble = true;
0
Oct 10 2018-11-11T00:
source share

Using <meta http-equiv="X-UA-Compatible" content="IE=9"> , IE9 + supports addEventListener by removing "on" in the event name, for example:

  var btn1 = document.getElementById('btn1'); btn1.addEventListener('mousedown', function() { console.log('mousedown'); });
0
Nov 16 '12 at 21:44
source share


More articles:


All Articles