Question

我正在尝试使用JavaScript事件来检查JSDOM中的输入复选框。

<input type="checkbox" id="foo" />

但我似乎无法通过在其上发送事件来检查自己：

var evt = document.createEvent("HTMLEvents");
evt.initEvent("click", false, true);
document.querySelector('#foo').dispatchEvent(evt)

但是，当我使用jQuery的.trigger('click')

时，它确实有效

为什么这段代码在jsdom中不起作用？我觉得在jsdom和jQuery修复的其他浏览器中存在一些小的不一致。

Answer 1

浏览器依赖于您在JavaScript中手动触发事件的方式。

Here's a demo

守则：

document.getElementById("foo").value='500';
if (document.getElementById("foo").fireEvent) {
    document.getElementById("foo").fireEvent("onclick");
} else if (document.getElementById("foo").dispatchEvent) {
    var clickevent=document.createEvent("MouseEvents");
    clickevent.initEvent("click", true, true);
    document.getElementById("foo").dispatchEvent(clickevent);
}

Updated Fiddle

更新代码：

if (document.getElementById("foo").fireEvent) {
    document.getElementById('car-make').attachEvent('onchange', update);
    document.getElementById("foo").fireEvent("onchange");

} else if (document.getElementById("foo").dispatchEvent) {
    document.getElementById('foo').addEventListener('change', update, false);
    var clickevent=document.createEvent("MouseEvents");
    clickevent.initEvent("change", true, true);
    document.getElementById("foo").dispatchEvent(clickevent);
}
function update () {
    alert('changed');
}

Answer 2

来自the specs：

当控件失去输入焦点并且自获得焦点后其值已时，会发生更改事件。此事件对INPUT，SELECT和TEXTAREA有效。元件。


气泡：是的

可取消：否

上下文信息：无

请注意这与click事件有何不同，例如：

点击事件时，点击设备按钮点击元素。

因此，触发change事件实际上不会改变输入值。

简而言之，Cancelable: No属性表示默认情况下不会发生任何事情。

使用JavaScript调度JSDOM上的事件

2 个答案: