Capture events in list

I would like to know how to capture events within the dropdown list when a user click on a “select” dropdown list. I would like for example to intercept events when different elements of list are on focus.

I tried to tie event listeners to the option elements of the list but they do not capture anything. See sample code here:

    <select>
        <option onfocus="alert('Hi there');">Foo</option>
        <option>Bar</option>
    </select>

Answer

You can’t, <select> is a replaced element and its children act only as data for it rather than actual child elements.

The best you can do is apply an onChange event to the <select> itself, then access this.options[this.selectedIndex] to do stuff.