javascript - 如何更新到 addEventListener？

Question

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

在我这样做之前，我想验证一些事情。

1. 我假设我不必调用 removeEventListener()，如果我更新 DOM 并删除元素(通过 .innerHTML 编写) .

2. addEventListener 受流行的现代浏览器支持 - IE9、Chrome、Firefox、Safari

3. 在现代浏览器上不会出现其他问题。

我问是因为我不想仓促更新我的代码。

注意事项:

属性与事件的相关性(删除 on)。

• onkeypress - 按键
• onblur -> 模糊
• onfocus -> 焦点

研究

https://developer.mozilla.org/en/DOM/element.addEventListener (有兼容性图表)

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

相关

JavaScript listener, "keypress" doesn't detect backspace?

注意事项

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

Answer 1

1) 您不需要为此调用 removeEventListener，但您需要调用 removeEventListener 如果您通过 addEventListener 删除了附加到 eventListener 的 DOM 元素，如果您删除了它的任何子元素你不需要删除任何东西。

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