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

两个问题：

该活动名为change，而非onchange。 onchange是HTML属性和DOM属性的名称。
您必须将函数传递给addEventListener，而不是字符串。

所以

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

应该有用。

您似乎正在将inline或traditional个事件处理程序与advanced event handlers混合。

等效内联事件处理程序：

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

或（不要这样做）：

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

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

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

fontsize.onchange = updateText;

为什么建议使用<select onchange="someMethod()">
以上的事件委派模型

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

我还建议阅读articles on quirksmode.org，在我看来，这些内容解释了您需要了解的有关事件处理程序的所有信息。

Answer 2

因为它应该是

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

不是onChange。

为什么赢得选择，火灾的onChange事件？

2 个答案: