addEventListener không hoạt động trong IE8

Tôi đã tạo một hộp kiểm động. Tôi đã từng addEventListenergọi một hàm khi nhấp vào hộp kiểm, hoạt động trong Google Chrome và Firefox nhưng không hoạt động trong Internet Explorer 8 . Đây là mã của tôi:

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

setCheckedValues là trình xử lý sự kiện của tôi.

Thử:

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

Cập nhật :: Đối với phiên bản Internet Explorer trước khi IE9, attachEvent phương pháp nên được sử dụng để đăng ký listener quy định để các EventTarget nó được gọi vào, cho người khác addEventListener nên được sử dụng.

Bạn phải sử dụng attachEventphiên bản IE trước IE9. Phát hiện xem có addEventListenerđược xác định hay không và sử dụng attachEventnếu không:

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

Lưu ý rằng IE11 sẽ loại bỏattachEvent .

Xem thêm:

• MDN:: element.addEventListenerInternet Explorer kế thừa và tệp đính kèm
• MSDN: phương thức AttachEvent

Đây cũng là giải pháp trình duyệt chéo đơn giản:

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

Tất nhiên, thay vì 'nhấp chuột' có thể là bất kỳ sự kiện nào.

IE không hỗ trợ addEventListenercho đến phiên bản 9, vì vậy bạn phải sử dụng attachEvent, đây là một ví dụ:

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

Có thể sẽ dễ dàng hơn (và có hiệu suất cao hơn) nếu bạn ủy quyền việc xử lý sự kiện cho một phần tử khác, ví dụ như bảng của bạn

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

});

theo cách này, bạn sẽ chỉ có một trình xử lý sự kiện và điều này cũng sẽ hoạt động đối với các phần tử mới được thêm vào. Điều này yêu cầu jQuery> = 1.7

Nếu không, hãy sử dụng ủy nhiệm ()

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

});

Bạn có thể sử dụng hàm addEvent () bên dưới để thêm sự kiện cho hầu hết mọi thứ nhưng lưu ý rằng đối với XMLHttpRequest if (el.attachEvent)sẽ không thành công trong IE8, vì nó không hỗ trợ XMLHttpRequest.attachEvent()nên bạn phải sử dụng XMLHttpRequest.onload = function() {}thay thế.

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) {
}

Tôi đã chọn Polyfill nhanh dựa trên các câu trả lời ở trên:

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

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

Tất nhiên, giống như các câu trả lời ở trên, điều này không đảm bảo rằng window.attachEventtồn tại, có thể là một vấn đề.

Nếu bạn sử dụng jQuery, bạn có thể viết:

$( _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
}