jQuery中复选框的change和click事件有何区别？

Question

jQuery中复选框的change和click事件有何区别？

javascriptjquerycheckboxonchange

34

正如标题所示，我想知道复选框（在jQuery中）的change和click事件之间的区别。

我已经阅读过这个问题的答案：What the difference between .click and .change on a checkbox，但对我没有用。即使在不失去焦点的情况下按空格键，change也会触发。

这是一个演示。

两者似乎都能工作。我错过了什么吗？

- Jashwant

似乎你自己回答了你的问题。 - Mukesh Soni

2

click 表示像单击其他元素一样单击复选框，change 表示复选框的值已更改。 - Esailija

4

复选框的值发生变化时，change事件就会触发...这可以通过以下方式实现：1. 使用鼠标单击复选框；2. 使用键盘改变复选框的值；3. 以编程方式改变复选框的值。但是，click事件只会在使用鼠标单击或模拟鼠标单击时触发。 - Mukesh Soni

@Esailija，首先感谢您提到的“pointer-events”（我从未听说过）。我理解您想表达的意思，但我担心它的实际应用。当然，“change”不仅适用于“pointer-events”。 - Jashwant

@Jashwant 不是的，我在谷歌浏览器中使用普通JS“。onclick / mouseup / mousedown / change = function（）{};”运行了我的测试http://jsfiddle.net/8RFGn/2/ - Esailija

显示剩余6条评论

7个回答

11

主要区别: 当您首次单击或在聚焦的复选框上按下空格键时，首先会触发click事件，且不会有任何更改。此时，您仍然可以通过event.preventDefault()阻止默认操作，该操作将切换该复选框的checked状态，并触发change事件（该事件没有默认操作）。

在某些浏览器中，只有在第一次click事件后的第一个blur事件之后，才会触发change事件。

- pozs

太棒了。我更新了我的fiddle来使用preventDefault()。在点击事件中，它可以阻止点击，但在检查事件中，它无法停止检查 :) 这是其中一个主要的区别。 - Jashwant

3

我猜测当复选框改变时会触发该变化（即使您没有点击它）。例如，如果您通过某些其他函数更改复选框的状态。

- PaperThick

1

我所体验到的不同之处是：

var $check = $(':checkbox');
$checkbox.checked = true;
$checkbox.click( function() {
    alert(this.checked); // true
}).change( function() {
    alert(this.checked); // false
});

因此，通过点击，状态尚未更改；而通过更改，则已更改...

- Simon

我认为“该点击事件无法通过键盘触发”应该是不言自明的。 - Simon

这是一个非常好的观点。但似乎在这里失败了（http://jsfiddle.net/8RFGn/6/）。 - Jashwant

0

如果这不起作用，请告诉我，我会删除我的帖子：

Change：http://api.jquery.com/change/ - 我认为当元素的state改变时，即不是点击而是改变时，会触发change事件。 复选框有选中和未选中状态。

Click：单击事件是指单击元素，无论复选框的状态如何。

就像伪代码一样

if checkbox state is checked

    alert(Hulk is awesome);

if checkbox is click every time

    alert(Ironman is alright);

- Tats_innit

但是在“复选框”中，状态将在每次“单击”时更改。您能指出它们工作不同的上下文吗？ - Jashwant

没问题；change 是状态改变时触发的事件，而 click 则是简单的点击事件。也就是说，当状态（选中/未选中）发生改变时会触发 change 事件；而当用户点击时则会触发 click 事件。如果这样说您能理解吗？ - Tats_innit

@Jashwant 哈哈，兄弟，你为什么要用切换绑定click事件，然后再进行unbind操作呢？:) ==> .unbind('click').bind('change', cb); 或者 .unbind('change').bind('click', cb); 就这样了？ - Tats_innit

我在每次单击“按钮”时绑定/解绑“复选框”的“click”和“change”事件。这样有什么问题吗？ - Jashwant

嗨，@Jashwant，不确定这样做会有什么成果，兄弟，这就是我的意思。无论如何，在我这边已经太晚了，所以我要去睡觉了，保重，干杯 :) - Tats_innit

显示剩余2条评论

0

你可以使用键盘（Tab 和空格键）来选中或取消复选框，而不需要点击它，这会改变状态，但不会进行单击操作。我的看法。

- loler

1

即使使用鼠标，“change”事件仍会触发。 - Jashwant

我是说，我想甚至不用鼠标点击也能改变“fires”。 - loler

click 触发事件而无需鼠标点击 :) - Jashwant

0

当复选框状态通过任何事件改变时，比如在复选框聚焦时按空格键、触发更改事件或点击时，Change事件将被触发。而Click事件仅在我们通过鼠标单击复选框时才会触发，但此时如果在单击之前指定了Change事件，则它也会运行，然后执行Click事件。

在这里，您可以清楚地看到对Bins进行了脚本编写：http://codebins.com/codes/home/4ldqpbu

- gaurang171

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jackwanders · Accepted Answer

根据W3C的说法，onclick事件是由键盘触发以方便辅助使用：SCR35: Making actions keyboard accessible by using the onclick event of anchors and buttons。为了提供更好的用户体验，即使使用键盘进行click操作，浏览器仍会触发onclick事件。

因此，jQuery的click事件将在复选框使用键盘空格键进行click操作时触发。change事件显然会在复选框状态改变时每次触发。

复选框恰好是change和click可以互换的特殊情况，因为你不能在不触发click事件的情况下触发change事件。

当然，这个规则的例外是如果您使用JavaScript手动更改复选框的状态，例如：

/* this would check the checkbox without firing either 'change' or 'click' */
$('#someCheckbox').prop('checked',true);

/* this would fire 'change', but not 'click'. Note, however, that this
   does not change the checkbox, as 'change()' is only the function that
   is fired when the checkbox changes, it is not the function that
   does the changing  */
$('#someCheckbox').trigger('change');

/* this would fire 'click', which by default change state of checkbox and automatically triggers 'change' */
$('#someCheckbox').trigger('click');

下面是这些不同动作的演示：http://jsfiddle.net/jackwanders/MPTxk/1/

希望对您有所帮助。