这是对复选框输入的默认点击事件或有缺陷的代码的核心误解吗？

Question

绑定到复选框输入的单击事件时,复选框已经在我的事件处理程序运行时切换,更奇怪的是,如果我指定了event.preventDefault(),则在我的事件处理程序运行后,切换会反转.

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

function clicked(evt) {
   alert(document.getElementById('foo').checked);
   evt.preventDefault();
}

document.getElementById('foo').addEventListener('click',clicked);

[在chrome和firefox中测试]

JSFiddle代码

警报将响应"true"(或复选框预先单击的相反状态).关闭警报后,复选框会切换回来.

所以,我猜问题是,

什么是实际的默认事件被阻止？假设我的事件处理程序应该在状态更改之前运行,我错了吗？有没有办法合法拦截复选框点击？

为什么世界上的preventDefault导致重新切换复选框？

Answer 1

被阻止实际的默认事件是该click事件.误解可能是因为你所想的事件作为烧成后的实际点击已完全处理(即复选框已被切换),而现实中的事件模型规定,处理程序便会启动,同时正在处理该事件.

如果它有帮助,我发现另一个有用的解释它是如何工作的模型是数据库事务模型:将事件处理程序视为作为事务的一部分被调用,其中复选框已被切换.

• 如果您阅读了复选框的状态,您会发现它已切换("写入"已发送到数据库).
• 但是,您仍然可以决定回滚事务(在这种情况下,撤消写入并将复选框切换回其原始值).