PURVEYOR OF FINE WORDS

July 16 2007

IE does not bubble form <select> element onchange events

When developing dynamically generated forms, you often want to attach a single event handler to the main form object, and have that handle the events generated by the form elements, thus saving you the trouble of constantly attaching event handlers to newly generated elements. However, IE 6 and 7 do not bubble the onchange event beyond the originating select element, meaning that you have to explicitly attach an onchange handler to every select you generate. All other current browsers bubble the event properly.

Here is a test form for checking if your browser registers the onchange event beyond the firing select element. Changing the select options should trigger an alert dialog box.

onchange listener attached to parent <div> node

onchange listener attached to parent <form> node

onchange listener attached to actual <select> node