点击和更改复选框时，.click和.change有什么区别？

Question

我在寻找如何为复选框添加事件，本以为人们会使用.change来设置更改事件，但我发现人们使用的是.click。

这是有原因的吗？它们似乎对于单击事件和键盘更改都能正常工作。我有什么遗漏的吗？

如果你不相信我可以自己试试。

- qwertymk

Answer 1

onchange 在IE中只有在复选框失去焦点时才会触发。因此，如果您使用Tab键到达它，按下空格键几次，然后再使用Tab键移开，您将只收到一个onchange事件，但会收到多个onclick事件。

注意：这是IE行为正确（根据规范），而其他浏览器错误的非常非常罕见的情况之一。

- user578895

---

也很有趣，我不知道你可以这样点击东西。 - mcgrailm

实际上它对点击也有效。如果您连续单击复选框两次，然后单击其他地方，将不会触发onchange事件（连续单击两次会将其返回到初始值），但您将收到两个onclick事件。 - user578895

值得注意的是，onchange 事件只在文本字段中焦点发生变化时触发 - 我之前并不知道复选框的行为有所不同，但我想这可能是因为它们的焦点定义不够明确。 - crazy2be

Answer 2

onclick比onchange更受欢迎的两个原因。

1. Internet Explorer only fires the onchange event when the checkbox loses the focus (onblur). So onclick is more of a cross browser solution.

2. onchange happens 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 the element.onchange implementation.

   control.onfocus = focus;
   control.onblur = blur;
   
   function focus () {
       original_value = control.value;
   }
   
   function blur () {
       if (control.value != original_value)
           control.onchange();
   }
   

- naveen

---

所有浏览器（除了IE，好吧，FF，Chrome，Safari）在复选框上立即触发onchange事件。 - user578895

@cwolves：我知道。但仍有56%的用户使用IE :) http://en.wikipedia.org/wiki/Usage_share_of_web_browsers - naveen

你的链接显示平均 45% :) - user578895

提到了 .NET 应用程序的份额 :) - naveen

:) 无论如何，这比我最初预期的要少得多。从程序员的角度来看，这非常好 :) - naveen

来自遥远的未来，只有1.98％-3.90％的用户使用IE。 - Mass Dot Net

Answer 3

.change在某些流行的浏览器中无法正确处理关键更改（用户使用上/下箭头键选择选项），但是.click也无法解决这个问题。有时需要结合keyup或keydown等来使用.change来解决此问题，但是当用户通过tab键访问文档时，如果回调函数中没有显式处理，可能会触发按键事件，因此情况会变得有些混乱。总的来说，很遗憾.change不能像您期望的那样工作，因为它可以解决一些耗时的问题。

- Rob

Answer 4

是的，两者都可以使用，只有点击不会看到实际对象的变化（比如被选中的复选框），而改变则会。

从技术上讲，改变更可靠，但在实践中两者都可以使用。

- cmplieger

Answer 5

它们默认情况下可能都会触发值的更改，但您可以覆盖onClick逻辑以不更改chackbox的值。您可以通过另一个入口点更改值。因此，需要具有.click和.change。

编辑-我也同意Dr Rob的观点

- IEnumerable