addEventListener在IE8中不起作用

Question

我已經動態創建了一個複選框。我使用addEventListener來調用一項功能，只需點擊複選框即可在Google Chrome和Firefox中使用，但在Internet Explorer 8中不起作用。這是我的代碼：

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

setCheckedValues是我的事件處理程序。

Answer 1

嘗試：

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

更新:: 對於之前的IE9版本的Internet Explorer，attachEvent方法應該是用於註冊指定的監聽器EventTarget它被稱爲上，爲他人addEventListener應該被使用。

Answer 2

您必須在IE9之前的IE版本中使用attachEvent。檢測addEventListener是否被定義和使用attachEvent如果不是：

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

注意IE11 will remove attachEvent。

參見：

• MDN: element.addEventListener: Legacy Internet Explorer and attachEvent
• MSDN: attachEvent method

Answer 3

如果你使用jQuery你可以寫：

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

Answer 4

MAYB更容易（並具有更高的性能），如果你委託的事件處理到另一個元素，例如你的表

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

}); 

這樣你將有隻有一個事件處理程序，這也將工作爲新添加的元素。這需要的jQuery> = 1.7

否則使用委託（）

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

}); 

Answer 5

IE不支持addEventListener直到9版本，所以你必須使用attachEvent，這裏有一個例子：

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

Answer 6

這也是簡單的瀏覽器解決方案：

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

而不是'點擊'當然可以是任何事件。

Answer 7

您可以使用下面的addEvent（）函數中添加事件，對於大多數事情，但注意，XMLHttpRequest的if (el.attachEvent)將在IE8中失敗，因爲它不支持XMLHttpRequest.attachEvent()所以你必須使用XMLHttpRequest.onload = function() {}代替。

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

Answer 8

我已經選擇了基於上述答案的快速填充工具：

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

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

當然，像上面這樣的答案並不能保證window.attachEvent存在，這可能是也可能不是一個問題。

Answer 9

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