复选框的单击和更改事件顺序是否有标准？答案

【问题标题】：Is there a standard for the event order of click and change on a checkbox?复选框的单击和更改事件顺序是否有标准？
【发布时间】：2014-07-29 12:06:45
【问题描述】：

我注意到 Chrome 和 Firefox 中“点击”和“更改”事件的顺序不同。

请参阅此 JSFiddle，例如：http://jsfiddle.net/5jz2g/3/

JavaScript：

var el = $('foo');
var fn = function(e) {
    console.log(e.type);
}
el.addEvent('change', fn);
el.addEvent('click', fn);

在 Chrome 中，此日志：

change
click

在 Firefox 中会记录：

click
change

事件的顺序有标准吗？哪个应该先开火？ MDN 似乎没有提及这一点，我在 W3C 文档中也找不到关于此的内容。

【问题讨论】：

如果没有提到，我不会依赖它。模糊事件也是如此。作为旁注，您绝对不应该依赖一个侦听器在另一个侦听器之前被调用（当您为同一事件注册两个侦听器时，因为它被指定为未定义）stackoverflow.com/questions/2706109/…
至少和checkbox没关系，只需要监听change事件
如果您的架构设计依赖于这些事件顺序，那么您应该重新考虑该架构的 99%
@micnic “更改”事件有问题的原因是旧版本 Internet Explorer 的行为。在元素失去焦点之前，它们不会触发“更改”事件。
恕我直言，FF 做得对。类似于表单提交按钮的点击事件与表单提交事件的关系。

标签： javascript checkbox onclick dom-events onchange

【解决方案1】：

DOM3 事件文档有一个关于事件顺序的recommendation。根据它，在复选框的情况下，正确的顺序将是click，然后是change，反之亦然，因为change事件显然是复选框默认操作的一部分，请参阅Example 5和fiddle，它在 FF 中按预期工作，但在 Chrome 中没有。无论如何，这是合乎逻辑的。但！让我们仔细阅读默认操作部分：

默认操作应在事件分发完成后执行，但在特殊情况下也可以在事件分发前立即执行。

你看到了吗？ W3C 在一句话中使用了 RFC 的 SHOULD 和 MAY 两个词！没什么可做的，他们是谨慎的人。 IMO，这就是为什么我们拥有我们所拥有的:)

【讨论】：

【解决方案2】：

不，但如果你想让它保持一致，你可以触发一个事件而不是让它们单独触发，因为对于一个复选框并将数量更改为相同的事件......或者你可以使用一个间隔计时器以延迟对其中一个事件的响应。

【讨论】：

【解决方案3】：

试试这个

$(function(){

    var $select = $('foo');
    var store = function(e) {
        console.log(e.type);
    };

    $select.addEvent('change', store).addEvent('click', store);

});

http://jsfiddle.net/donddoug/Du7z5/

【讨论】：

【解决方案4】：

找不到跨浏览器同步事件的方法...

以下内容在 FF 和 Chrome 中的工作顺序相同；

JavaScript 代码（使用 mouseup / mousedown 捕捉“点击”）：

var el = $('foo');
var fn = function(e) {
    console.log(e.type);
}
el.addEvent('change', fn);
el.addEvent('mouseup', fn);

http://jsfiddle.net/5jz2g/17/

【讨论】：