addEventListener not working in IE8
JavascriptInternet Explorer-8AddeventlistenerJavascript Problem Overview
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.
Javascript Solutions
Solution 1 - Javascript
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.
Solution 2 - Javascript
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:
Solution 3 - Javascript
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.
Solution 4 - Javascript
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) {
}
Solution 5 - Javascript
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);
}
Solution 6 - Javascript
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(){
});
Solution 7 - Javascript
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.
Solution 8 - Javascript
If you use jQuery you can write:
$( _checkbox ).click( function( e ){ /*process event here*/ } )
Solution 9 - Javascript
if (document.addEventListener) {
document.addEventListener("click", attachEvent, false);
}
else {
document.attachEvent("onclick", attachEvent);
}
function attachEvent(ev) {
var target = ev.target || ev.srcElement;
// custom code
}