Does the onchange event propagate?

Question

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.

score 44 · Accepted Answer · edited Apr 09 '18 at 22:42

44

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

edited Apr 09 '18 at 22:42

Aliaksandr Sushkevich

11,550
7
37
44

answered Nov 05 '08 at 19:21

Sergey Ilinsky

31,255
9
54
56

2

I don't understand the first sentence of this answer, if it's true, as you say, that change is spec'd as bubbling, and it's implemented properly in most browsers. Is that a mistake? – enigment Feb 15 '13 at 19:18
6

@Sergey, Can you clarify your answer? In the first sentence you say it doesn't bubble, in the second sentence you say it does... ? Why did this answer get so many upvotes? – mediafreakch Jun 29 '13 at 12:55
@mediafreakch Because even though it was confusing, it had the right information. I've updated the answer to be clearer and added references – Ruan Mendes Mar 14 '14 at 17:58
Bubbling change event fires only after focus out/in. – kemsky Jul 17 '16 at 21:35
In case anyone else misreads this at first as I did (and apparently @mediafreakch too): "change", "submit", and "reset" DO bubble and "focus" and "blur" DO NOT bubble -- at least in spec-compliant browsers. – Matt Browne Feb 21 '18 at 16:47

score 23 · Answer 2 · answered Jan 18 '11 at 09:06

23

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.
});

answered Jan 18 '11 at 09:06

jcampbell1

4,159
3
33
35

score 0 · Answer 3 · answered Nov 05 '08 at 13:26

0

I haven't dealt with this for quite a while, but last time I did, I remember that Firefox recognized the event on the <SELECT> element, while IE6 recognized only events on the <OPTION> tags. As far as I remember.

IE7 was not out at that time.

So if this is the case, it makes even more sense to not write the event handler inline and apply it on DOM ready instead, lest you are going to have a lot of polluted, repetitive code.

answered Nov 05 '08 at 13:26

schonarth

526
6
13

No IE has a bug in that it doesn't register events on the – scunliffe Nov 05 '08 at 14:35

score -2 · Answer 4 · answered Nov 05 '08 at 13:22

Not sure if I get the question, but if you mean this, then NO.

<div id="foo">
  <select onchange="alert('hi');">
    <option>Hello</option>
    <option>World</option>
  </select>
</foo>

Where the div id="foo" would have an onchange event... bubbling up from the select list?

on a related note, just an FYI you can't attach an event to the options within the select list in IE (well, you can but it won't fire)

Does the onchange event propagate?

4 Answers4

Linked