Events triggered while selecting an option from <select>

See the test case. Test performed by Rodney Rehm (@rodneyrehm).

For context the <select> was placed in a <div> that is just a tiny bit larger. We're interested only in the events' originalTarget, so the table below won't show any bubbled events.

Mouse Events

The following table shows the sequence of events triggered for selecting an option using only the mouse.

Case 1: Click to open `<select>`

Firefox 19	Chrome 25	Safari 6.0.2	Opera 12.14	IE 9	IE 10
moving the cursor on top of the <select>
div: mouseover div: mouseenter div: mousemove div: mouseout select: mouseover select: mouseenter select: mousemove	div: mouseover div: mousemove div: mouseout select: mouseover select: mousemove	div: mouseover div: mousemove div: mouseout select: mouseover select: mousemove	div: mouseenter div: mouseover div: mousemove div: mouseout select: mouseenter select: mouseover select: mousemove	div: mousemove div: mouseover div: mouseenter div: mousemove div: mouseout select: mousemove select: mouseover select: mouseenter select: mousemove	div: MSPointerMove div: mousemove div: MSPointerOver div: mouseover div: mouseenter div: MSPointerMove div: mousemove div: MSPointerOut div: mouseout select: MSPointerMove select: mousemove select: MSPointerOver select: mouseover select: mouseenter select: MSPointerMove select: mousemove
clicking to see the list of options
select: mousedown select: focus select: mouseup select: click	select: mousedown select: focus	select: mousedown select: focus	select: mousedown select: focus	select: mousedown select: focus select: mousemove select: mouseup select: click select: mousemove	select: MSPointerDown select: mousedown select: focus select: MSPointerUp select: mouseup select: click
moving cursor on top of the 4th option "delta"
select: mousemove select: mouseout select: mouseleave div: mouseleave select: mouseover div: mouseenter select: mouseenter select: mouseout option: mouseover option: alpha option: mouseenter option: alpha option: mousemove option: alpha option: mouseout option: alpha option: mouseleave option: alpha option: mouseover option: bravo option: mouseenter option: bravo option: mousemove option: bravo option: mouseout option: bravo option: mouseleave option: bravo option: mouseover option: charlie option: mouseenter option: charlie option: mousemove option: charlie option: mouseout option: charlie option: mouseleave option: charlie option: mouseover option: delta option: mouseenter option: delta option: mousemove option: delta	--	--	--	select: mousemove select: mouseout select: mouseleave div: mouseleave select: mousedown	select: MSPointerOut select: mouseout select: mouseleave div: mouseleave
clicking to select the 4th option "delta"
option: mousedown option: delta option: mouseup option: delta select: change option: click option: delta option: mouseout option: delta option: mouseleave option: delta select: mouseleave div: mouseleave	select: change	select: change select: mouseout select: mouseup select: mouseover select: click select: mouseout	select: input select: change select: mouseup option: mouseup option: delta select: click	select: mouseup select: change option: click option: delta	select: MSPointerDown select: mousedown select: MSPointerUp select: mouseup select: change option: click option: delta
slight mouse move once options list closed
--	select: mouseout	--	select: mouseout select: mouseleave div: mouseleave	--	--
click on document to lose focus
select: blur	select: blur	select: blur	select: blur	select: blur	select: blur

Case 2: Keep mouse button pressed to open `<select>`

Firefox 19	Chrome 25	Safari 6.0.2	Opera 12.14	IE 9	IE 10
moving the cursor on top of the <select>
div: mouseover div: mouseenter div: mousemove div: mouseout select: mouseover select: mouseenter select: mousemove	div: mouseover div: mousemove div: mouseout select: mouseover select: mousemove	div: mouseover div: mousemove div: mouseout select: mouseover select: mousemove	div: mouseenter div: mouseover div: mousemove div: mouseout select: mouseenter select: mouseover select: mousemove	div: mousemove div: mouseover div: mouseenter div: mousemove div: mouseout select: mousemove select: mouseover select: mouseenter select: mousemove	div: MSPointerMove div: mousemove div: MSPointerOver div: mouseover div: mouseenter div: MSPointerMove div: mousemove div: MSPointerOut div: mouseout select: MSPointerMove select: mousemove select: MSPointerOver select: mouseover select: mouseenter select: MSPointerMove select: mousemove
mouse down to see the list of options
select: mousedown select: focus	select: mousedown select: focus	select: mousedown select: focus	select: mousedown select: focus	select: mousedown select: focus select: mousemove	select: MSPointerDown select: mousedown select: focus
moving cursor on top of the 4th option "delta"
select: mousemove select: mouseout select: mouseleave div: mouseleave select: mouseover div: mouseenter select: mouseenter select: mousemove select: mouseout option: mouseover option: alpha option: mouseenter option: alpha option: mousemove option: alpha option: mouseout option: alpha option: mouseleave option: alpha option: mouseover option: bravo option: mouseenter option: bravo option: mousemove option: bravo option: mouseout option: bravo option: mouseleave option: bravo option: mouseover option: charlie option: mouseenter option: charlie option: mousemove option: charlie option: mouseout option: charlie option: mouseleave option: charlie option: mouseover option: delta option: mouseenter option: delta option: mousemove option: delta	--	--	--	select: mousemove select: mouseout select: mouseleave select: mousemove div: mouseover div: mouseout div: mouseleave	select: MSPointerMove select: mousemove select: MSPointerOut select: mouseout select: mouseleave div: mouseleave select: MSPointerMove select: mousemove
mouse up to select the 4th option "delta"
option: mouseup option: delta select: change option: click option: delta option: mouseout option: delta option: mouseleave option: delta select: mouseleave div: mouseleave	select: change	select: change select: mouseout select: mouseup select: mouseover select: click select: mouseout	select: input select: change select: mouseup option: mouseup option: delta select: click	select: mouseup option: click option: alpha	select: MSPointerUp select: mouseup
click to close list of options
N/A	N/A	N/A	N/A	select: mousedown select: mouseup select: change option: click option: delta	select: MSPointerDown select: mousedown select: MSPointerUp select: mouseup select: change option: click option: delta
slight mouse move once options list closed
--	select: mouseout	--	select: mouseout select: mouseleave div: mouseleave	--	--
click on document to lose focus
select: blur	select: blur	select: blur	select: blur	select: blur	select: blur

Keyboard Events

Firefox 19	Chrome 25	Safari 6.0.2	Opera 12.14	IE 9	IE 10
`TAB` to focus the <select>
select: focus select: keyup key: 9	select: focus select: keyup key: 9	select: focus select: keyup key: 9	select: focus select: keyup key: 9	select: focus select: keyup key: 9	select: focus select: keyup key: 9
`Arrow Down` (repeatedly) to select the 4th option "delta"
select: keydown key: 40 select: keypress key: 40 select: keyup key: 40 select: keydown key: 40 select: keypress key: 40 select: keyup key: 40 select: keydown key: 40 select: keypress key: 40 select: keyup key: 40	select: keydown key: 40	select: keydown key: 40	select: keydown key: 40 option: mousedown option: bravo select: input select: change option: mouseup option: bravo option: click option: bravo select: keyup key: 40 select: keydown key: 40 option: mousedown option: charlie select: input select: change option: mouseup option: charlie option: click option: charlie select: keyup key: 40 select: keydown key: 40 option: mousedown option: delta select: input select: change option: mouseup option: delta option: click option: delta select: keyup key: 40	select: keydown key: 40 select: change select: keyup key: 40 select: keydown key: 40 select: change select: keyup key: 40 select: keydown key: 40 select: change select: keyup key: 40	select: keydown key: 40 select: change select: keyup key: 40 select: keydown key: 40 select: change select: keyup key: 40 select: keydown key: 40 select: change select: keyup key: 40
`Enter` to activate selection / close options list
select: keydown key: 13 select: change select: keypress key: 13 select: keyup key: 13	select: change select: keyup key: 13	select: change select: keyup key: 13	select: keydown key: 13 select: keypress key: 13 select: input select: change select: keyup key: 13	select: keydown key: 13 select: keypress key: 13 select: keyup key: 13	select: keydown key: 13 select: keypress key: 13 select: keyup key: 13
`TAB` to unfocus the <select>
select: keydown key: 9 select: keypress key: 9 select: blur	select: keydown key: 9 select: blur	select: keydown key: 9 select: blur	select: keydown key: 9 select: blur	select: keydown key: 9 select: blur	select: keydown key: 9 select: blur

Touch Events

iPad Safari 6.1.2	Chrome 18 Android 4.2.2	IE 10 MS Surface RT
tap to focus the <select>
select: touchstart select: touchend select: mouseover select: mousemove select: mousedown select: focus select: mouseup select: click	select: touchstart select: touchend select: mouseover select: mousemove select: mousedown select: focus select: mouseup select: click	select: mousemove select: MSPointerOver select: mouseover div: mouseenter select: mouseenter select: MSPointerDown select: mousedown select: focus select: MSPointerMove select: mousemove select: MSPointerUp select: mouseup select: MSPointerOut select: mouseout select: mouseleave div: mouseleave select: click
tap to select the 4th option "delta"
select: change select: blur	select: change	select: MSPointerDown select: mousedown select: MSPointerUp select: change select: mouseup option: change option: delta
tap on document to lose focus
--	select: mouseout select: blur	select: blur