JavaScript：onchange还是addEventListener？

Question

我对JavaScript完全不了解。但我之前学过Activescript，被教导使用addEventListener来处理事件。

但当我开始学习JavaScript时，虽然addEventListener也是一种选择，但似乎它只是使用addEventListener的一个小方式。相反，人们使用onChange()。

除了在语法上有所不同，还有其他行为上的区别吗？

我也被告知始终要使用removeEventListener。这似乎并不是非常必要的。如果我使用onChange，是否就没有必要编写removeEventListener呢？

谢谢

- Hoy Cheung

---

要了解更多差异和相关内容，请访问http://www.quirksmode.org/js/introevents.html。 - Felix Kling

Answer 1

两个主要区别：

• addEventListener 不兼容旧版IE浏览器
• onchange 不会添加事件监听器，而是替换现有的监听器

- Denys Séguret

---

第二个说法并不完全正确。onchange将替换使用onchange设置的事件处理程序，但不会替换使用addEventListener设置的事件处理程序（在IE11、Firefox和Chrome中进行了测试）。Fiddle链接：https://jsfiddle.net/ThatMatthew/ksngmpy3/ - undefined

Answer 2

使用 addEventListener 可以附加多个事件监听器，但在 onchange 属性中不适用。

- Waleed Khan

Answer 3

我个人认为addEventListener更好。以下是HTML5中使用它的示例。

document.addEventListener("input", function(){
  target = window.event.target.value;
  window.event.target.nextSibling.nextSibling.value = target*2;
});

<input name="1" value="25">
<input name="2" value="50" readonly>
<p>Hello World</p>

- Jens Ingels

---

为什么这样做更好呢？我不确定是否与你的观点有关，但是像这样两次依赖于nextSibling似乎非常脆弱，而且在对标记进行小改动时很容易出错。我更喜欢添加类或id并使用选择器，而不是假设输出恰好相隔2个兄弟节点。 - ggorlen

你可以用onchange做完全相同的事情。 - undefined

自2013年引入以来，这个问题已经发生了相当大的变化，特别是在我们接近2024年之际。回顾过去，最初的问题与2021年修改后的问题有很大的不同。最初，这个挑战主要围绕着无法修改JavaScript的HTML源代码，从而排除了在这个特定用例中使用class或id的可能性。 - undefined

Answer 4

明白了，这取决于你的使用情况：

当你想要替换所有当前监听器并且确定不会添加新的监听器时，请使用 onchange。

当你可能需要多个监听器时，请使用 addEventListener。

  const els = document.getElementsByClassName("input-field")
  for (const el of els) {
    // choose one
    el.onchange = (e) => eventInputChanged(e)
    el.addEventListener("change", eventInputChanged)
  }

- Karl S

Answer 5

你们所说的都是对的，但当“代码”进行更改时，只有onchange似乎能捕捉到更改。

- Enzo Morrone