Msie and Addeventlistener Problem in JavaScript

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.

addEventListener Problems in IE

IE < 9 doesn't support addEventListener instead use attachEvent

setTimeout(function(){
    if(win.addEventListener) // w3c standard
        win.addEventListener("unload", VideoUploaded, false);
    else if win.attachEvent('onunload', VideoUploaded, false); // IE
    else win.onunload=VideoUploaded;
}, 500);

Here is an answer on SO.

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.

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 not supporting in IE 8

IE8 does not support addEventListener(). It has it's own attachEvent() which is similar so you have to check if addEventListener is there and if not, use attachEvent().

IE8 also does not support .forEach() on arrays. You can either install a shim (shown here) for it or use a regular for loop to iterate through arrays (the old fashioned way).

This is a simple cross browser event function:

// add event cross browser
function addEvent(elem, event, fn) {
    if (elem.addEventListener) {
        elem.addEventListener(event, fn, false);
    } else {
        elem.attachEvent("on" + event, function() {
            // set the this pointer same as addEventListener when fn is called
            return(fn.call(elem, window.event));   
        });
    }
}

So, instead of:

sub.addEventListener("change", fn);

You would use this:

addEvent(sub, "change", fn);

and it would work in both modern browsers and older versions of IE>

Here's a little more advanced version with more features:

// refined add event cross browser
function addEvent(elem, event, fn) {
    // allow the passing of an element id string instead of the DOM elem
    if (typeof elem === "string") {
        elem = document.getElementById(elem);
    }

    function listenHandler(e) {
        var ret = fn.apply(this, arguments);
        if (ret === false) {
            e.stopPropagation();
            e.preventDefault();
        }
        return(ret);
    }

    function attachHandler() {
        // normalize the target of the event
        window.event.target = window.event.srcElement;
        // make sure the event is passed to the fn also so that works the same too
        // set the this pointer same as addEventListener when fn is called
        var ret = fn.call(elem, window.event);   
        // support an optional return false to be cancel propagation and prevent default handling
        // like jQuery does
        if (ret === false) {
            window.event.returnValue = false;
            window.event.cancelBubble = true;
        }
        return(ret);
    }

    if (elem.addEventListener) {
        elem.addEventListener(event, listenHandler, false);
    } else {
        elem.attachEvent("on" + event, attachHandler);
    }
}

Javascript) I used addEventListener to use 'mouseover' but it doesn't work. I can't figure out the problem

Try this, you have to pull out the element from the array.

Also, it's not getElement.. but getElementsByClass

var t = document.getElementsByClass('recipe')[0];
t.addEventListener('mouseover', function(sHover) {
  var a = document.getElementById('submenu');
  a.style.visibility = 'visible';
});

You should consider using querySelector(".recipe") instead

---

Related Topics