Question

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

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

非常直接。复选框会显示“＆＃39; Y＆＃39;或者＆＃39; N＆＃39;在点击时隐藏输入。

在js脚本中，我添加了一个＆＃34;更改＆＃34;像这样的事件监听器（我遗漏了一些x浏览器的东西）：

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或{{1}会更好复选框。

JS

onchange

HTML

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

使用addEventListener添加的fire change事件

2 个答案: