MSIE and addEventListener Problem in Javascript?

Question

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

In Chrome / Safari, the above will run the "beforecopy" function when the content on the page is being copied. MSIE is supposed to support this functionality as well, but for some reason I'm getting this error:

"Object doesn't support this property or method"

Now, it's my understanding that Internet Explorer won't play with the body node, but I would have thought providing a node by ID would work fine. Does anyone have any ideas about what I'm doing wrong? Thanks in advance.

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

Here is a good article that explains the capture phase and `useCapture` very well: http://coding.smashingmagazine.com/2013/11/12/an-introduction-to-dom-events/#event-phases — feeela, Nov 19 '13 at 09:57

score 186 · Accepted Answer · edited Dec 22 '11 at 18:55

186

In IE you have to use attachEvent rather than the standard addEventListener.

A common practice is to check if the addEventListener method is available and use it, otherwise use attachEvent:

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

You can make a function to do it:

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 an example of the above code here.

The third argument of addEventListener is useCapture; if true, it indicates that the user wishes to initiate event capturing.

edited Dec 22 '11 at 18:55

Dan O

5,646
1
32
47

answered Nov 08 '09 at 04:40

Christian C. Salvadó

723,813
173
899
828

1

I appreciate your response. I just tried what you posted, and it worked. The thing that's throwing me off now is that the "copy" event isn't working but the "onclick" event is. Specifically, this is strange because quirksmode states that it should work: http://www.quirksmode.org/dom/events/cutcopypaste.html Any ideas? – Matrym Nov 08 '09 at 04:55
Scratch that comment. I just isolated and tried what you sent, and changing click to copy does work. Thanks again. – Matrym Nov 08 '09 at 05:01
1

why does microsoft's own documentation show using `addEventListener` then? http://msdn.microsoft.com/en-us/library/ie/cc197015(v=vs.85).aspx – wmarbut Feb 26 '13 at 15:14
1

@wmarbut addEventListener was added in, I believe, IE9. attachEvent was removed in IE 11. The original question is from 2009. CMS has provided the correct, robust method that continues to work even with IE 11. – Colin Young Apr 24 '14 at 14:27
That explains why it works on the internet but not on the intranet for me, because I have my settings for intranet sites set to compatibility mode. – Roger Perkins Nov 28 '16 at 15:31

score 32 · Answer 2 · answered Aug 19 '14 at 15:05

32

In case you are using JQuery 2.x then please add the following in the

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

This worked for me.

answered Aug 19 '14 at 15:05

Aarif

441
4
5

4

for those that run IE versions <= 8, this will not fix the problem. – ninjaneer Aug 20 '14 at 19:29

Dan Herbert · Answer 3 · 2015-01-30T17:55:12.010

Internet Explorer (IE8 and lower) doesn't support addEventListener(...). It has its own event model using the attachEvent method. You could use some code like this:

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

Though I recommend avoiding writing your own event handling wrapper and instead use a JavaScript framework (such as jQuery, Dojo, MooTools, YUI, Prototype, etc) and avoid having to create the fix for this on your own.

By the way, the third argument in the W3C model of events has to do with the difference between bubbling and capturing events. In almost every situation you'll want to handle events as they bubble, not when they're captured. It is useful when using event delegation on things like "focus" events for text boxes, which don't bubble.

score 5 · Answer 4 · answered Aug 19 '14 at 07:55

5

try adding

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

right after the opening head tag

answered Aug 19 '14 at 07:55

130nk3r5

390
4
10

3

for those that run IE versions <= 8, this will not fix the problem. – ninjaneer Aug 20 '14 at 19:29

score 2 · Answer 5 · edited May 18 '17 at 13:05

2

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

edited May 18 '17 at 13:05

bluish

23,093
23
110
171

answered Nov 19 '13 at 09:32

Will Mainwaring

31
5

score 0 · Answer 6 · edited May 18 '17 at 13:05

0

Using <meta http-equiv="X-UA-Compatible" content="IE=9">, IE9+ does support addEventListener by removing the "on" in the event name, like this:

 var btn1 = document.getElementById('btn1');
 btn1.addEventListener('mousedown', function() {
   console.log('mousedown');
 });

edited May 18 '17 at 13:05

bluish

23,093
23
110
171

answered Nov 16 '12 at 21:44

basiphobe

552
5
11

score 0 · Answer 7 · edited May 18 '17 at 13:06

0

The problem is that IE does not have the standard addEventListener method. IE uses its own attachEvent which does pretty much the same.

Good explanation of the differences, and also about the 3rd parameter can be found at quirksmode.

edited May 18 '17 at 13:06

bluish

23,093
23
110
171

answered Nov 08 '09 at 04:41

Jani Hartikainen

40,227
10
60
82

score 0 · Answer 8 · answered Oct 10 '11 at 13:47

0

As PPK points out here, in IE you can also use

e.cancelBubble = true;

answered Oct 10 '11 at 13:47

magikMaker

2,654
25
20

MSIE and addEventListener Problem in Javascript?

8 Answers8

Linked

Related