触发使用addEventListener添加的变更事件。

Question

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

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

很简单。当复选框被点击时，它会在隐藏输入框中放置“Y”或“N”。

在js脚本中，我添加了一个“change”事件监听器，如下所示（我省略了一些跨浏览器的内容）：

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

由于隐藏元素是通过编程方式更改的，因此其 onchange 事件不会触发。 我认为在复选框的 onclick 中添加 this.form.hiddenField.onchange（）; 可以解决问题，但实际上并没有。

由于我正在使用 element.addEventListener ，因此 element.onchange 未定义。

如何触发使用 addEventListener 添加的事件的更改事件？

- user3439515

Answer 1

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

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

更简单的方法是这样的：

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

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

另一种选择当然是使用类似jQ（您知道那个词）的东西。

另一个解决方案是给复选框本身赋予name和value，并且摆脱隐藏输入。多年来，复选框一直没有使用任何Javascript进行处理。

- Gas Welder

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" />

- jwatts1980