为什么select的onChange事件不会触发？

Question

function updateText(){
    alert(fontsize.options[fontsize.selectedIndex].value);
}

var fontsize = document.getElementById("fontsize");
fontsize.addEventListener('onChange','updateText',false);  

这是我的JavaScript，用于处理网页上字体大小的选择。 但是，当我在下拉列表中选择其他值时，什么也不会发生。

控制台日志中也没有错误。

因此，我的问题是：
1.为什么不起作用？
2.为什么建议在<select onchange="someMethod()">使用事件委托模型

Answer 1

两个问题：

1. 该事件称为change ，而不是onchange 。 onchange是HTML属性和DOM属性的名称。

2. 您必须将函数传递给addEventListener ，而不是字符串。

所以

fontsize.addEventListener('change', updateText, false);

应该管用。

看来您正在将内联或传统事件处理程序与高级事件处理程序混合在一起。

等效的内联事件处理程序：

<select id="fontsize" onchange="updateText()">

或（不要这样做）：

fontsize.setAttribute('onchange', 'updateText()');

除非您只是制作原型，否则使用内联事件处理程序通常不是一个好主意，请参见下文。

等效的传统事件处理程序：

fontsize.onchange = updateText;

---

为什么建议在<select onchange="someMethod()">使用事件委托模型

这与事件委托 无关 。 事件委托是一个独立于事件处理程序绑定方式的概念。 由于不使用内联事件处理程序的实际原因，请在此处查看我的答案onclick =“” vs事件处理程序 。

我还建议阅读quirksmode.org上的文章 ，我认为这些文章解释了您需要了解的有关事件处理程序的一切。

Answer 2

因为应该

fontsize.addEventListener('change', updateText, false);

不是onChange 。