Order of onclick and onselect Javascript events

Question

When a user clicks on a select control to select an option, do both the onclick and onselect events fire? If so, in what order? Is it browser-dependent?

Answer 1

Should be fairly easy to test:

<select onclick="alert('click');" onselect="alert('select');"><option>A</option><option>B</option></select>

Answer 2

It should be:

• mousedown
• mouseup
• click
• select

But I'm not sure if nonstandard browsers (IE) always conform to this. If in doubt, test it with a bunch of event listeners.

Answer 3

The select event does not do what you think it does. It fires when you select text within a textbox or textarea. The events that fire when you click on a select element are:

1. mousedown
2. focus (if the select element did not already have focus)
3. mouseup
4. click

When you change the selected value by clicking on an item in the select list, the change event is fired. In IE, this event is also fired every time you change the highlighted item with the keyboard. In Firefox and Chrome, you have to hit the 'enter' key to trigger change.