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.

Answer 1

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

A common practice is to check if the addEventListerner 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 the addEventListener is useCapture, if true indicates that the user wishes to initiate event capturing.

Answer 2

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

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

Answer 3

Internet Explorer doesn't support addEventListener(...) in any form. It has its own completely different 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);
}

Although I'd recommend you avoid this whole situation completely and just use a JavaScript framework (such as jQuery, Dojo, MooTools, YUI, or Prototype) and avoid having to worry about the problems completely.

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.

The only time I've seen it useful to handle events during the "capturing" phase is when using event delegation on things like focus events for text boxes, which don't bubble.