Addeventlistener in Internet Explorer

addEventListener in Internet Explorer

addEventListener is the proper DOM method to use for attaching event handlers.

Internet Explorer (up to version 8) used an alternate attachEvent method.

Internet Explorer 9 supports the proper addEventListener method.

The following should be an attempt to write a cross-browser addEvent function.

function addEvent(evnt, elem, func) {
   if (elem.addEventListener)  // W3C DOM
      elem.addEventListener(evnt,func,false);
   else if (elem.attachEvent) { // IE DOM
      elem.attachEvent("on"+evnt, func);
   }
   else { // No much to do
      elem["on"+evnt] = func;
   }
}

addEventListener does not work in IE 11

Sounds like a dupe of Detecting the onload event of a window opened with window.open

but I could not see a specific answer of your question in it.

But why not do

window.onload=function() { opener.handle_popup() } // or attachEventListener

in the child window? Not need for attach events that may never be triggered because your attaching may be after the load triggered

TRY IT

Tested and working (after allowing popups) in Chrome Edge, IE11 and FX

addEventListener not working in IE8

Try:

if (_checkbox.addEventListener) {
    _checkbox.addEventListener("click", setCheckedValues, false);
}
else {
    _checkbox.attachEvent("onclick", setCheckedValues);
}

Update::
For Internet Explorer versions prior to IE9, attachEvent method should be used to register the specified listener to the EventTarget it is called on, for others addEventListener should be used.

MSIE and addEventListener Problem in Javascript?

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.

Add eventListener in IE javascript

IE9 does support addEventListener().

Here is how your existing function would work with attachEvent (and the old on* property).

// logic to attach the event correctly in IE9
function AttachEvent(element, type, handler) {
    if (element.addEventListener) {
        element.addEventListener(type, handler, false);
    }else if (element.attachEvent) {
        element.attachEvent('on' + type, handler)
    } else {
        element['on' + type] = handler;
    }
}

You'd then set the window load event...

AttachEvent(window, "load", function() {
    // ...
});     

Don't forget that the event is global with the older IEs. You could script around that if you wanted to. You'd simply have each function call this callback() which would go on to invoke the user-supplied handler() with the correct arguments.

var callback = function(e) {
    e = e || window.event;
    handler.call(element, e);
};

You could get carried away and try and normalise properties on event, such as target/srcElement, but then you might want to consider an existing library.

---

Related Topics