Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Does the onchange event propagate?

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.

like image 796
slashnick Avatar asked Nov 05 '08 13:11

slashnick


People also ask

What does Onchange event do?

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.

What triggers Onchange event?

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.

What are the three phases of event propagation?

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.

How does event propagation work?

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.


2 Answers

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

  • http://www.quirksmode.org/dom/events/change.html
  • http://quirksmode.org/dom/events/submit.html
like image 102
Sergey Ilinsky Avatar answered Oct 09 '22 02:10

Sergey Ilinsky


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. }); 
like image 26
jcampbell1 Avatar answered Oct 09 '22 03:10

jcampbell1