CODEWITHSUNDEEP
javascriptinternet-explorer-8addeventlistener
ravi404
ravi404

Reputation: 7309

addEventListener not working in IE8

I have created a checkbox dynamically. I have used addEventListener to call a function on click of the checkbox, which works in Google Chrome and Firefox but doesn't work in Internet Explorer 8. This is my code:

var _checkbox = document.createElement("input");
_checkbox.addEventListener("click", setCheckedValues, false);

setCheckedValues is my event handler.

Upvotes: 118

Views: 120037

Answers (9)

Pramod Kumar
Pramod Kumar

Reputation: 135

if (document.addEventListener) {
    document.addEventListener("click", attachEvent, false);
}
else {
    document.attachEvent("onclick", attachEvent);
}
function attachEvent(ev) {
    var target = ev.target || ev.srcElement;
    // custom code
}

Upvotes: 0

Zeta
Zeta

Reputation: 105955

You have to use attachEvent in IE versions prior to IE9. Detect whether addEventListener is defined and use attachEvent if it isn't:

if(_checkbox.addEventListener)
    _checkbox.addEventListener("click",setCheckedValues,false);
else
    _checkbox.attachEvent("onclick",setCheckedValues);
//                         ^^ -- onclick, not click

Note that IE11 will remove attachEvent.

See also:

Upvotes: 44

Sudhir Bastakoti
Sudhir Bastakoti

Reputation: 100205

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.

Upvotes: 215

Campbeln
Campbeln

Reputation: 2990

I've opted for a quick Polyfill based on the above answers:

//# Polyfill
window.addEventListener = window.addEventListener || function (e, f) { window.attachEvent('on' + e, f); };

//# Standard usage
window.addEventListener("message", function(){ /*...*/ }, false);

Of course, like the answers above this doesn't ensure that window.attachEvent exists, which may or may not be an issue.

Upvotes: 2

Anon
Anon

Reputation: 41

You can use the below addEvent() function to add events for most things but note that for XMLHttpRequest if (el.attachEvent) will fail in IE8, because it doesn't support XMLHttpRequest.attachEvent() so you have to use XMLHttpRequest.onload = function() {} instead.

function addEvent(el, e, f) {
    if (el.attachEvent) {
        return el.attachEvent('on'+e, f);
    }
    else {
        return el.addEventListener(e, f, false);
    }
}

var ajax = new XMLHttpRequest();
ajax.onload = function(e) {
}

Upvotes: 4

Adriano Repetti
Adriano Repetti

Reputation: 67148

IE doesn't support addEventListener until version 9, so you have to use attachEvent, here's an example:

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

Upvotes: 3

Sergey Onishchenko
Sergey Onishchenko

Reputation: 7881

This is also simple crossbrowser solution:

var addEvent =  window.attachEvent||window.addEventListener;
var event = window.attachEvent ? 'onclick' : 'click';
addEvent(event, function(){
    alert('Hello!')
});

Instead of 'click' can be any event of course.

Upvotes: 13

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76910

Mayb it's easier (and has more performance) if you delegate the event handling to another element, for example your table

$('idOfYourTable').on("click", "input:checkbox", function(){

});

in this way you will have only one event handler, and this will work also for newly added elements. This requires jQuery >= 1.7

Otherwise use delegate()

$('idOfYourTable').delegate("input:checkbox", "click", function(){

});

Upvotes: 2

philipp
philipp

Reputation: 16505

If you use jQuery you can write:

$( _checkbox ).click( function( e ){ /*process event here*/ } )

Upvotes: 0

Related Questions