Search code examples
javascripthandlerhtml-selectevent-bubblingevent-capturing

What event(s) to choose to delegate a handler from <select> to the selected <option>?


When another <option> is selected in a <select> control, it is possible to process this event with a <select>-triggered handler in a quite straight way. However for some reasons it would be much convenient for my project to use a delegated <option>-triggered handler instead. I tried to trigger and delegate a needed handler with using different events. The results were unsatisfactory:

  • onfocus, onchange and onkeyup handlers were triggered only on the <select> control and were not triggered on a nested <option>.
  • onclick handler worked as needed and was delegated (triggered on the selected <option>). However, it obviously makes no sense to use this handler, as another option in a select control can be chosen by keyboard too, rather than only by mouse.

Am I right? Did I missed any standard DOM event that can be used in the case? Or I have to use only a kind of polyfill, like jQuery's focusin and focusout?


Solution

  • It follows from the discussion there are no DOM event(s) that meet the specified requirements.