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

Question

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

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

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

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

所以，我的问题是:
1. 为什么不起作用？
2. 为什么推荐使用事件委托(delegate)模型而不是<select onchange="someMethod()">

Answer 1

两个问题:

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

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

所以

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

应该可以。

看来你正在混合inline或traditional事件处理程序 advanced event handlers .

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

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

或者(不要这样做):

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

除非您只是对某些东西进行原型(prototype)设计，否则使用内联事件处理程序通常不是一个好主意，请参见下文。

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

fontsize.onchange = updateText;

<小时/>

Why is using event delegation model recommended over <select onchange="someMethod()">

这与 event delegation 没有任何关系。事件委托(delegate)是一个独立于事件处理程序绑定(bind)方式的概念。出于实际原因不使用内联事件处理程序，请参阅此处我的答案 onclick="" vs event handler .

我还建议阅读articles on quirksmode.org我认为这解释了您需要了解的有关事件处理程序的所有信息。