I'm using event delegation to listen for events lower in the DOM, but it's not working for an onchange event on a select box. Does the onchange event propagate or bubble up the DOM?
Googling has failed in finding a conclusive answer.
The onchange attribute fires the moment when the value of the element is changed. Tip: This event is similar to the oninput event. The difference is that the oninput event occurs immediately after the value of an element has changed, while onchange occurs when the element loses focus.
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.
The standard DOM Events describes 3 phases of event propagation: Capturing phase – the event goes down to the element. Target phase – the event reached the target element. Bubbling phase – the event bubbles up from the element.
You can think of propagation as electricity running through a wire, until it reaches its destination. The event needs to pass through every node on the DOM until it reaches the end, or if it is forcibly stopped. Bubbling and Capturing are the two phases of propagation.
According to specification, change
, submit
, reset
should bubble and focus
and blur
should not bubble.
This behavior is implemented properly in all web browsers except IE < 9, that is, change
, submit
, reset
do bubble properly in IE >= 9.
See https://stackoverflow.com/a/4722246/227299 for a jQuery workaround on old IE versions
In jQuery 1.4+ the change event bubbles in all browsers, including IE.
$('div.field_container').change(function() { // code here runs in all browers, including IE. });
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With