2012-03-19 119 views
113

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

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

setCheckedValues是我的事件處理程序。

回答

211

嘗試:

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

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

+1

關於爲什麼應該使用這個描述會改善答案。 – dkris 2015-01-28 12:48:36

+0

@dkris添加了一個簡短的說明作爲澄清,我希望讓事情更清楚一點.. :) – 2015-01-28 14:03:00

0

如果你使用jQuery你可以寫:

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

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

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

}); 

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

否則使用委託()

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

}); 
3

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

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

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

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

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

+0

+1,我認爲這是一個聰明的解決方法! addEventListener的第三個參數是可選的,所以這可能是一個很好的解決方案,它比if-else分支更好。但在這種情況下,'_checkbox'是目標元素,而不是'window'。 :)所以也許你可以創建一個函數,其中事件目標是另一個參數。 – Sk8erPeter 2013-05-18 23:09:21

+0

哦,我upvoted太早... :)我在Chrome中獲得_「TypeError:Illegal invocation」_如果我嘗試別名事件目標元素addEventListener調用 - 請參閱此主題:http://stackoverflow.com /問題/ 1007340/JavaScript的功能混淆-犯規,似乎到工作。所以對於'window'對象,它可以正常工作,但不適用於文檔內的其他節點。這樣,你原來的問題中提到的情況下,你提出的別名是不正確的!你的解決方法是什麼? – Sk8erPeter 2013-05-18 23:59:11

2

您可以使用下面的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) { 
} 
2

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

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

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

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

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

顯示代碼的含義或添加一些註釋要好得多。謝謝 – toha 2017-04-06 08:04:02