如何更新到 addEventListener？答案

【问题标题】：How do I update to addEventListener?如何更新到 addEventListener？
【发布时间】：2012-05-25 04:50:41
【问题描述】：

我即将更新我的代码以使用 addEventListener()，而不是仅在 Javascript 中写入元素属性。

在此之前，我想验证几件事。

如果我更新 DOM 并删除元素（.innerHTML 写入），我假设我不必调用 removeEventListener()。
addEventListener 支持流行的现代浏览器 - IE9、Chrome、Firefox、Safari
现代浏览器不会出现其他问题。

我之所以这么问，是因为我不想急于更新我的代码。

注意事项：

事件关联的属性（去掉 on ）。

onkeypress - 按键
onblur -> 模糊
聚焦 -> 聚焦

研究

https://developer.mozilla.org/en/DOM/element.addEventListener（有兼容性图）

http://www.quirksmode.org/js/events_advanced.html

备注

而不是返回假。使用preventDefault() 阻止表单在输入时提交。

【问题讨论】：

你的假设是正确的......去吧......顺便说一句，存储当前文件的副本以防万一！
好的....如果有任何问题...我会在这里发布。
@CS_2013 对于addEventListener，它是按键。此外，您可能希望使用 jQuery 来制作跨浏览器。如果可能的话，它在后台使用addEventListener，对于旧版IE，它可以回退到attachEvent，并且还可以标准化您的事件对象，因此您不必担心差异。
@baz - 我的目标不是 IE9 之前的版本......但是很好的信息。知道...谢谢

标签： javascript dom-events addeventlistener

【解决方案1】：

1) 您不需要为此调用 removeEventListener，但您需要调用 removeEventListener你不需要删除任何东西。

2) 所有主流浏览器都支持 addEventListener

3) 现代浏览器上没有其他与 addEventListener 相关的问题

4) onkeypress 不是事件名称而是属性，事件名称为keypress。其他名称*相同

避免使用 jQuery 以实现跨浏览器兼容性的快速代码：

Element.prototype.on = function(evt, fn) {
if (this.addEventListener)
    this.addEventListener(evt, fn, false);
else if (this.attachEvent)
    this.attachEvent('on' + evt, fn);
};

Element.prototype.off = function(evt, fn) {
    if (this.removeEventListener)
        this.removeEventListener(evt, fn, false);
    else if (this.detachEvent)
        this.detachEvent('on' + evt, fn);
};

【讨论】：

【解决方案2】：

您不必这样做。如果您不存储对 DOM 元素的引用（例如在意外的全局变量中），垃圾收集器应该清理它。
这是浏览器支持。对于较旧的 IE，attachEvent() 的作用几乎相同。
您无需担心。这是现代的方式。

注意：您可能想使用jQuery 来制作跨浏览器。如果可能，它在后台使用addEventListener，对于旧版IE 和normalizes your event object，可以回退到attachEvent，因此您不必担心差异。它也非常适合 DOM 操作和遍历。

【讨论】：