Javascript 复选框上的 .click 和 .change 有什么区别
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5575338/
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
What the difference between .click and .change on a checkbox
提问by qwertymk
I was looking around to add an event to a checkbox and I would have thought people would use .changeto set up a change event but instead I found that people are using .click
我环顾四周向复选框添加一个事件，我原以为人们会.change用来设置更改事件，但我发现人们正在使用.click
Is there a reason for this? They both seem to work fine both with clicked events and with keyboard changes. Am I missing something?
是否有一个原因？它们似乎都适用于单击事件和键盘更改。我错过了什么吗？
If you don't believe me then try it out yourself
如果你不相信我，那就自己试试吧
采纳答案by Mark Kahn
onchangein IE only fires when the checkbox loses focus. So if you tab to it, hit space a few times, tab out, you'll only get one onchangeevent, but several onclickevents.
onchange在 IE 中，只有当复选框失去焦点时才会触发。因此，如果您按 Tab 键，按空格键几次，再按 Tab 键，您只会得到一个onchange事件，但会得到多个onclick事件。
Note: this is one of the very, very, very rare times when IE's behavior is correct (according to spec) and other browsers are wrong.
注意：这是 IE 行为正确（根据规范）而其他浏览器错误的非常、非常、非常罕见的时间之一。
回答by naveen
Two reasons why onclickis preferred over onchange.
onclick优于 的两个原因onchange。
Internet Explorer only fires the onchange event when the checkbox loses the focus (onblur). So
onclickis more of a cross browser solution.onchangehappens only after the element lose focus.(You wont see a difference since you are calling alert and losing focus on every change). The pseudo code on MDC pretty much explains theelement.onchangeimplementation.control.onfocus = focus; control.onblur = blur; function focus () { original_value = control.value; } function blur () { if (control.value != original_value) control.onchange(); }
Internet Explorer 仅在复选框失去焦点 (onblur) 时触发 onchange 事件。所以
onclick更像是一个跨浏览器的解决方案。onchange仅在元素失去焦点后才会发生。（您不会看到差异，因为您正在调用警报并失去对每个更改的关注）。MDC 上的伪代码几乎解释了element.onchange实现。control.onfocus = focus; control.onblur = blur; function focus () { original_value = control.value; } function blur () { if (control.value != original_value) control.onchange(); }
回答by Rob
.change doesn't work correctly for at least some popular browsers in relation to key changes (the user selecting option with up/down arrow keys) but then .click doesn't overcome this either. Sometimes the use of keyup or keydown or something is used in conjunction with .change to overcome this issue however it starts to get a bit messy when you user's tab the document as this can trigger the key event if it's not explicitly handled within the callback. All in all it's a shame that .change doesn't work as you would expect as it would solve some time consuming issues.
.change 至少在一些流行的浏览器中无法正常工作，与关键更改（用户使用向上/向下箭头键选择选项）有关，但 .click 也无法克服这一点。有时使用 keyup 或 keydown 或其他东西与 .change 结合使用来解决这个问题，但是当你用户标签文档时它开始变得有点混乱，因为如果它没有在回调中明确处理，这可能会触发键事件。总而言之，很遗憾 .change 不能像您期望的那样工作，因为它可以解决一些耗时的问题。
回答by cmplieger
yes both work, only click does not look at the actual object changing (like a checkbox that gets checked), change does.
是的，两者都有效，只有单击不会查看实际对象的变化（例如选中的复选框），更改确实如此。
Technically it is more reliable but in practise both work.
从技术上讲，它更可靠，但在实践中两者都有效。
回答by IEnumerable
They may both fire a change in the value by default, but you may override the onClick logic to NOT change the value of a chackbox. You may change the value via another entry point. So having a .click and a .change is needed.
默认情况下，它们都可能会触发值的更改，但您可以覆盖 onClick 逻辑以不更改 chackbox 的值。您可以通过另一个入口点更改该值。所以需要一个 .click 和一个 .change 。
edit - I also agree with Dr Rob
编辑 - 我也同意 Rob 博士的观点
