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.
This question is related to
javascript
internet-explorer-8
addeventlistener
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(){
});
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) {
}
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);
}
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.
If you use jQuery you can write:
$( _checkbox ).click( function( e ){ /*process event here*/ } )
if (document.addEventListener) {
document.addEventListener("click", attachEvent, false);
}
else {
document.attachEvent("onclick", attachEvent);
}
function attachEvent(ev) {
var target = ev.target || ev.srcElement;
// custom code
}
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:
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.
Source: Stackoverflow.com