.on change vs .on click

Question

Today I was writing code that is running code if a person clicks a checbox.

I wrote the code like this:

$(".checkbox").on( "click", function() {
    //code
});

I could also write the code like this:

$(".checkbox").on( "change", function() {
    //code
});

Both achieve the same end I am looking to achieve but should I use one over the other?

Bruv `:)` if you mean `change === click` then it ain't right decide what event user calls or should trigger. — Tats_innit, May 13 '14 at 01:11
You can tab to the input and then hit space. In other words, `click` won't catch keyboard events. — Josh Crozier, May 13 '14 at 01:11

score 10 · Accepted Answer · edited May 13 '14 at 01:20

10

You should use change, since a checkbox can be changed via a keyboard (tab to element, press space). Also, it can be changed from some other Javascript code (in the future), or via a label being clicked if that label is 'attached' to the checkbox.

edited May 13 '14 at 01:20

L84

45,514
58
177
257

answered May 13 '14 at 01:12

Hamza Kubba

2,259
14
12

score 1 · Answer 2 · answered May 13 '14 at 01:22

Form elements raise onchange events whenever the user changes their values. Like the other answer says, this can be due to mouse clicks or key presses.

Any element that takes up screen space will raise an onclick event whenever the user clicks on it. The callback you provide is given an argument that contains the cursor's X and Y coordinates and some other stuff.

It just so happens that when you click a checkbox, that changes its value, so both onclick and onchange events are raised.

You should use whichever event best matches the effect you want on your page.

.on change vs .on click

2 Answers2