addEventListener 在 IE8 中不起作用

IT技术 javascript internet-explorer-8 addeventlistener
2021-01-31 20:13:02

我动态创建了一个复选框。我曾经addEventListener在单击复选框时调用一个函数,该函数在 Google Chrome 和 Firefox 中有效,但在 Internet Explorer 8 中无效这是我的代码:

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

setCheckedValues 是我的事件处理程序。

6个回答

尝试:

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

更新:: 对于IE9 之前的Internet Explorer 版本,应使用attachEvent方法将指定的侦听器注册到调用它EventTarget,否则应使用addEventListener

关于为什么应该使用它的描述将改进答案。
2021-03-13 20:13:02
@dkris 添加了一个简短的描述作为澄清,我希望这能让事情更清楚一些.. :)
2021-04-02 20:13:02

您必须attachEvent在 IE9 之前的 IE 版本中使用检测是否addEventListener已定义,attachEvent如果未定义则使用

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

请注意,IE11 将删除attachEvent.

也可以看看:

这也是简单的跨浏览器解决方案:

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

当然,“点击”可以是任何事件。

哦,我upvoted太早... :)我得到一个:“类型错误非法调用”在Chrome中,如果我尝试别名事件目标元素的addEventListener电话-看到这个话题:stackoverflow.com/questions/1007340/...所以对于window对象来说,它工作正常,但对文档内的其他节点不起作用。这样,您建议的别名对于原始问题中提到的情况是不正确的!你的解决方法是什么?
2021-03-15 20:13:02
+1,我认为这是一个聪明的解决方法!addEventListener的第三个参数无论如何都是可选的,所以这可能是一个很好的解决方案,并且比 if-else 分支更好。但在这种情况下,_checkbox是目标元素,而不是window:) 所以也许你可以创建一个函数,其中事件目标是另一个参数。
2021-04-03 20:13:02

IEaddEventListener直到版本 9才支持,因此您必须使用attachEvent,这是一个示例:

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

您可以使用下面的 addEvent() 函数为大多数事情添加事件,但请注意,对于 XMLHttpRequestif (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) {
}