Javascript событие при выборе select

Events triggered while selecting an option from

For context the was placed in a 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
Keyboard Events
Touch Events
и | JavaScript
HTMLSelectElement.type : получить тип
HTMLSelectElement.multiple : получить и изменить тип
HTMLSelectElement.length : получить и изменить количество пунктов
HTMLSelectElement.add() : добавить новый пункт

Mouse Events

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

Case 1: Click to open

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

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

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

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

select : mouseout

select : mouseout
select : mouseleave
div : mouseleave

select : blur

select : blur

select : blur

select : blur

select : blur

select : blur

Case 2: Keep mouse button pressed to open

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

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

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

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

select : mousedown
select : mouseup
select : change
option : click option: delta

select : MSPointerDown
select : mousedown
select : MSPointerUp
select : mouseup
select : change
option : click option: delta

select : mouseout

select : mouseout
select : mouseleave
div : mouseleave

select : blur

select : blur

select : blur

select : blur

select : blur

select : blur

Читайте также: Slice image to html

Keyboard Events

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

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

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

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

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

select : change
select : blur

select : change

select : MSPointerDown
select : mousedown
select : MSPointerUp
select : change
select : mouseup
option : change option: delta

select : mouseout
select : blur

select : blur

Источник

и | JavaScript

В Mozilla Firefox и в IE не срабатывает клик, если щёлкать по уже выбранному пункту, и весь подсчёт сбивается.

Тип тега

HTMLSelectElement.type : получить тип

Возвращает select-one или select-multiple , если есть атрибут multiple .

HTMLSelectElement.multiple : получить и изменить тип

Возвращает false или true , если есть атрибут multiple .

Количество пунктов

HTMLSelectElement.length : получить и изменить количество пунктов

HTMLSelectElement.add() : добавить новый пункт

Получить значение

select.value : выводится значение атрибута value или при его отсутствии текст выбранного тега option [whatwg.org].

Источник