Javascript 复选框的更改和单击事件之间的jQuery区别
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11205957/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery difference between change and click event of checkbox
提问by Jashwant
As title suggests I want to know the difference between the changeand clickevent of checkbox (in jQuery)
正如标题所示，我想知道checkboxchange和clickevent之间的区别（在 jQuery 中）
I have read down the answer to this What the difference between .click and .change on a checkbox
我已经阅读了这个问题的答案复选框上的 .click 和 .change 有什么区别
But, its not working for me. changefires even when I hit spaces without losing focus.
但是，它对我不起作用。change即使我在不失去焦点的情况下击中空格也会触发。
Here's a fiddle demo
这是一个小提琴演示
Both seems to be working alike. Am I missing something here ?
两者的工作方式似乎相似。我在这里错过了什么吗？
回答by Hymanwanders
According to the W3C, the onclickevent is triggered by the keyboard for accessibility purposes:
根据 W3C，onclick出于可访问性目的，该事件由键盘触发：
SCR35: Making actions keyboard accessible by using the onclick event of anchors and buttons
SCR35：通过使用锚点和按钮的 onclick 事件使操作键盘可访问
In order to provide a better user experience for those without the use of a mouse, browsers have been developed to fire the onclickevent even if the clickoccurs with a keyboard.
为了给那些不使用鼠标的用户提供更好的用户体验，浏览器已经被开发出来，onclick即使点击发生在键盘上也能触发该事件。
For this reason, jQuery's clickevent will fire even if the checkbox is clickedby using the keyboard's spacebar. change, obviously, will fire every time the checkbox's state changes.
因此，click即使使用键盘的空格键单击复选框，jQuery 的事件也会触发。change，显然，每次复选框的状态改变时都会触发。
The checkbox just happens to be the special case where changeand clickare interchangable, because you can't fire the changeevent without also triggering click.
该复选框恰好是change和click可互换的特殊情况，因为您无法在change不触发click.
Of course, the exception to this rule is if you were to use javascript to manually alter the checkbox, such as:
当然，这条规则的例外是如果您要使用 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');
Here's a demonstration of these different actions: http://jsfiddle.net/Hymanwanders/MPTxk/1/
这是这些不同操作的演示：http: //jsfiddle.net/Hymanwanders/MPTxk/1/
Hope this helps.
希望这可以帮助。
回答by pozs
The main difference: when you click / hit space on a focused checkbox first the clickevent fired, with no changes. At this point you can still prevent the default action (with event.preventDefault()) which would be to toggle the checkedstate of that checkbox, and fire the changeevent (which hasn't got default action).
主要区别：当您首先单击/点击焦点复选框上的空格时，click事件会被触发，没有任何变化。此时，您仍然可以阻止默认操作（使用event.preventDefault()），该操作将切换该checked复选框的状态，并触发change事件（没有默认操作）。
In some browsers the change event will fire only after the first blurafter the click.
在某些浏览器更改事件后，才先大火blur后click。
回答by PaperThick
I would guess that change fires when the checkbox changes (even if you don't click on it). Eg if you change the checkbox's state via some other function.
我猜想更改会在复选框更改时触发（即使您不单击它）。例如，如果您通过某些其他功能更改复选框的状态。
回答by Simon
The difference I experienced is this:
我经历的不同之处在于：
var $check = $(':checkbox');
$checkbox.checked = true;
$checkbox.click( function() {
alert(this.checked); // true
}).change( function() {
alert(this.checked); // false
});
So with click the state has not yet changed, with change it has...
所以点击状态还没有改变，随着改变它已经......
回答by gaurang171
Change event fires when check box status has been changed through whatever occurrence will be happened either through pressing space when check box was focused Or Triggered change event Or clicked Where as Click event has been fired only when we clicked on check box through mouse click but at that time before click if change event has been specified then it also runs and then execute click event.
通过在复选框聚焦时按空格或触发更改事件或单击而发生的任何事件更改复选框状态时，将触发更改事件 仅当我们通过鼠标单击单击复选框时才会触发 Click 事件，但在单击之前的那个时间，如果已指定更改事件，则它也会运行，然后执行单击事件。
Here you can see clear script has been done on bins: http://codebins.com/codes/home/4ldqpbu
在这里你可以看到明确的脚本已经在 bins 上完成：http: //codebins.com/codes/home/4ldqpbu
回答by F0G
you can check or uncheck checkbox without clicking, using keyboard (tab and space bars) this goes to change statement but not to click. IMHO
您可以在不单击的情况下选中或取消选中复选框，使用键盘（制表符和空格键）这会更改语句但不会单击。恕我直言
回答by Tats_innit
Please let me know if this doesn't help I will remove my post:
如果这没有帮助，请告诉我，我将删除我的帖子：
Change: http://api.jquery.com/change/- I reckon change event get triggered when the stateof the element if changed i.e. not clicked but changed. Checkboxhas checked and unchecked state.
Change：http: //api.jquery.com/change/- 我认为更改事件会state在元素的更改时触发，即未单击但更改。复选框已选中和未选中状态。
Click: click event is when you click the element doesn't matter what the state of the checkbox is going to be.
Click：单击事件是当您单击元素时，复选框的状态将是什么无关紧要。
like in pseudo code
就像在伪代码中一样
if checkbox state is checked
alert(Hulk is awesome);
if checkbox is click every time
alert(Ironman is alright);
