Select events in html with javascript

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
HTMLInputElement: select event
Syntax
Event type
Examples
Selection logger
onselect equivalent
Specifications
Browser compatibility
Found a content problem with this page?
MDN
Support
Our communities
Developers

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

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

Источник

HTMLInputElement: select event

The select event fires when some text has been selected.

Syntax

Use the event name in methods like addEventListener() , or set an event handler property.

addEventListener("select", (event) => >); onselect = (event) => >;

Event type

Examples

Selection logger

input value="Try selecting some text in this element." /> p id="log">p>

function logSelection(event)  const log = document.getElementById("log"); const selection = event.target.value.substring( event.target.selectionStart, event.target.selectionEnd, ); log.textContent = `You selected: $selection>`; > const input = document.querySelector("input"); input.addEventListener("select", logSelection);

onselect equivalent

You can also set up the event handler using the onselect property:

Specifications

Browser compatibility

BCD tables only load in the browser

Found a content problem with this page?

This page was last modified on Jul 7, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник