使用 addEventListener 添加的火灾变化事件

Question

我有一个包含以下标记的页面：

<input type="checkbox" onclick="this.form.hiddenField.value=(this.checked?'Y':'N');">
<input type="hidden" name="hiddenField" value="N">

非常简单。单击复选框时，复选框会将“Y”或“N”置于隐藏的输入中。

在 js 脚本中，我添加了一个像这样的“更改”事件监听器（我遗漏了一些 x-browser 的东西）：

myHiddenElement.addEventListener("change", function(e){
    //do something
};

由于隐藏元素正在以编程方式更改，因此它的

onchange

事件不会触发。我认为将

this.form.hiddenField.onchange();

添加到复选框的

onclick

中可以解决问题，但事实并非如此。

因为我使用的是

element.addEventListener

，所以

element.onchange

是未定义的。

如何为使用

addEventListener

添加的事件触发更改事件？

Answer 1

在现代浏览器中你可以这样做：

input.dispatchEvent( new CustomEvent( "change" ) );

更简单的方法是这样的：

function changeHandler(){
    // whatever
}
input.addEventListener( "change", changeHandler, false );
...
changeHandler.call( input );

这是假设您不需要处理程序中的事件对象，通常对于 onchange 您不需要。

另一种选择当然是使用像 jQ 这样的东西......（好吧，你知道这个词:)）

另一个解决方案是给复选框本身一个

name

和

value

并摆脱隐藏的输入。多年来，复选框一直在没有任何 Javascript 的情况下进行处理。

Answer 2

我认为依靠隐藏字段的

onchange

是不太可靠的选择。隐藏和文本输入的

onchange

事件并不像你想象的那么简单。 （例如，文本字段的

onchange

在文本字段失去焦点后触发，而不是在您键入Fiddle时触发）最好依靠复选框的

onclick

或

onchange

。

JS

function checkChange(cb) {
    if (cb.checked) {
        cb.form.hiddenField.value = "Y";
        //do checked stuff
    } else {
        cb.form.hiddenField.value = "N";
        //do unchecked stuff
    }
}

HTML

<input type="checkbox" onclick="checkChange(this)" />
<input type="hidden" name="hiddenField" value="N" />