Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there a standard for the event order of click and change on a checkbox?

Tags:

I've noticed that the order of 'click' and 'change' events are different in Chrome and Firefox.

See this JSFiddle for example: http://jsfiddle.net/5jz2g/3/

JavaScript:

var el = $('foo');
var fn = function(e) {
    console.log(e.type);
}
el.addEvent('change', fn);
el.addEvent('click', fn);

In Chrome this logs:

change
click

And in Firefox this logs:

click
change

Is there a standard for the order of events? Which should fire first? The MDN doesn't seem to mention this and I couldn't find a thing about this in the W3C documents.

like image 814
stroborobo Avatar asked Jul 29 '14 12:07

stroborobo


People also ask

What is the event for checkbox?

Checkbox event handling using pure Javascript There are two events that you can attach to the checkbox to be fired once the checkbox value has been changed they are the onclick and the onchange events.

What is Onchange Onclick?

Internet Explorer only fires the onchange event when the checkbox loses the focus (onblur). So onclick is more of a cross browser solution. onchange happens only after the element lose focus. (You wont see a difference since you are calling alert and losing focus on every change).

What is the difference between Onchange and Onclick react JS?

onclick is an event that declares when something, anything, is clicked. onchange is an event that declares when an input is changed. If the event is a click that changes the input, then there is no difference. Both will be declared.

What is a Onchange in Javascript?

The onchange event occurs when the value of an element has been changed. For radiobuttons and checkboxes, the onchange event occurs when the checked state has been changed.


1 Answers

DOM3 Events document has a recommendation about events order. According to it, in case of checkbox, the correct order will be click then change and not vice versa, because change event obviously is a part of default actions for checkbox, see Example 5 and fiddle, which works as expected in FF but not in Chrome. That's logical, anyway. But! Let's read default actions section carefully:

Default actions should be performed after the event dispatch has been completed, but in exceptional cases may also be performed immediately before the event is dispatched.

Did you see that? W3C uses RFC's words SHOULD and MAY in one sentence! Nothing to be done, they're cautious guys. IMO, that's why we have what we have :)

like image 140
raidendev Avatar answered Oct 03 '22 08:10

raidendev