1. Introduction
1.1. Overview
TODO.
1.2. Conformance
Boilerplate?
2. Stylistic Conventions
This specification follows the Proposed W3C Specification Conventions, with the following supplemental additions:
This is a note.
This is an open issue.
This is a warning.
interface Example { // This is an IDL definition. };
3. Mouse Events
The mouse event module originates from the [HTML401] onclick
, ondblclick
, onmousedown
, onmouseup
, onmouseover
, onmousemove
, and onmouseout
attributes. This event module is specifically
designed for use with pointing input devices, such as a mouse or a trackball.
3.1. Interface MouseEvent
Introduced in DOM Level 2, modified in this specification
The MouseEvent
interface provides specific contextual information
associated with Mouse events.
In the case of nested elements, mouse events are always targeted at the most deeply nested element.
Ancestors of the targeted element can use event bubbling to obtain notifications of mouse events which occur within their descendent elements.
To create an instance of the MouseEvent
interface, use the MouseEvent
constructor, passing an optional MouseEventInit
dictionary.
When initializing MouseEvent
objects using initMouseEvent
,
implementations can use the client coordinates clientX
and clientY
for calculation of other coordinates (such
as target coordinates exposed by DOM Level 0 implementations or
other proprietary attributes, e.g., pageX
).
3.1.1. MouseEvent
[Exposed =Window ]interface :
MouseEvent UIEvent {(
constructor DOMString ,
type optional MouseEventInit = {});
eventInitDict readonly attribute long screenX ;readonly attribute long screenY ;readonly attribute long clientX ;readonly attribute long clientY ;readonly attribute long layerX ;readonly attribute long layerY ;readonly attribute boolean ctrlKey ;readonly attribute boolean shiftKey ;readonly attribute boolean altKey ;readonly attribute boolean metaKey ;readonly attribute short button ;readonly attribute unsigned short buttons ;readonly attribute EventTarget ?relatedTarget ;boolean getModifierState (DOMString ); };
keyArg
screenX
, of type long, readonly-
The horizontal coordinate at which the event occurred relative
to the origin of the screen coordinate system.
The un-initialized value of this attribute MUST be
0
. screenY
, of type long, readonly-
The vertical coordinate at which the event occurred relative to
the origin of the screen coordinate system.
The un-initialized value of this attribute MUST be
0
. clientX
, of type long, readonly-
The horizontal coordinate at which the event occurred relative
to the viewport associated with the event.
The un-initialized value of this attribute MUST be
0
. clientY
, of type long, readonly-
The vertical coordinate at which the event occurred relative
to the viewport associated with the event.
The un-initialized value of this attribute MUST be
0
. layerX
, of type long, readonly-
The horizontal offset from the nearest ancestor element which
is a stacking context, is positioned, or paints in the
positioned phase when painting a stacking context.
The un-initialized value of this attribute MUST be
0
. layerY
, of type long, readonly-
The vertical offset from the nearest ancestor element which
is a stacking context, is positioned, or paints in the
positioned phase when painting a stacking context.
The un-initialized value of this attribute MUST be
0
. ctrlKey
, of type boolean, readonly-
Refer to the
KeyboardEvent
'sctrlKey
attribute.The un-initialized value of this attribute MUST be
false
. shiftKey
, of type boolean, readonly-
Refer to the
KeyboardEvent
'sshiftKey
attribute.The un-initialized value of this attribute MUST be
false
. altKey
, of type boolean, readonly-
Refer to the
KeyboardEvent
'saltKey
attribute.The un-initialized value of this attribute MUST be
false
. metaKey
, of type boolean, readonly-
Refer to the
KeyboardEvent
'smetaKey
attribute.The un-initialized value of this attribute MUST be
false
. button
, of type short, readonly-
During mouse events caused by the depression or release of a mouse button,
button
MUST be used to indicate which pointer device button changed state.The value of the
button
attribute MUST be as follows:-
0
MUST indicate the primary button of the device (in general, the left button or the only button on single-button devices, used to activate a user interface control or select text) or the un-initialized value. -
1
MUST indicate the auxiliary button (in general, the middle button, often combined with a mouse wheel). -
2
MUST indicate the secondary button (in general, the right button, often used to display a context menu). -
3
MUST indicate the X1 (back) button. -
4
MUST indicate the X2 (forward) button.
Some pointing devices provide or simulate more button states, and values higher than
2
or lower than0
MAY be used to represent such buttons.The value of
button
is not updated for events not caused by the depression/release of a mouse button. In these scenarios, take care not to interpret the value0
as the left button, but rather as the un-initialized value.Some default actions related to events such as
mousedown
andmouseup
depend on the specific mouse button in use.The un-initialized value of this attribute MUST be
0
. -
buttons
, of type unsigned short, readonly-
During any mouse events,
buttons
MUST be used to indicate which combination of mouse buttons are currently being pressed, expressed as a bitmask.Though similarly named, the values for the
buttons
attribute and thebutton
attribute are very different. The value ofbutton
is assumed to be valid duringmousedown
/mouseup
event handlers, whereas thebuttons
attribute reflects the state of the mouse’s buttons for any trustedMouseEvent
object (while it is being dispatched), because it can represent the "no button currently active" state (0).The value of the
buttons
attribute MUST be as follows:-
0
MUST indicate no button is currently active. -
1
MUST indicate the primary button of the device (in general, the left button or the only button on single-button devices, used to activate a user interface control or select text). -
2
MUST indicate the secondary button (in general, the right button, often used to display a context menu), if present. -
4
MUST indicate the auxiliary button (in general, the middle button, often combined with a mouse wheel).
Some pointing devices provide or simulate more buttons. To represent such buttons, the value MUST be doubled for each successive button (in the binary series
8
,16
,32
, ... ).Because the sum of any set of button values is a unique number, a content author can use a bitwise operation to determine how many buttons are currently being pressed and which buttons they are, for an arbitrary number of mouse buttons on a device. For example, the value
3
indicates that the left and right button are currently both pressed, while the value5
indicates that the left and middle button are currently both pressed.Some default actions related to events such as
mousedown
andmouseup
depend on the specific mouse button in use.The un-initialized value of this attribute MUST be
0
. -
relatedTarget
, of type EventTarget, readonly, nullable-
Used to identify a secondary
EventTarget
related to a UI event, depending on the type of event.The un-initialized value of this attribute MUST be
null
. getModifierState(keyArg)
-
Introduced in this specification
Queries the state of a modifier using a key value.
Returns
true
if it is a modifier key and the modifier is activated,false
otherwise.- DOMString keyArg
- Refer to the
KeyboardEvent
'sgetModifierState()
method for a description of this parameter.
3.1.2. MouseEventInit
dictionary :
MouseEventInit EventModifierInit {long screenX = 0;long screenY = 0;long clientX = 0;long clientY = 0;short button = 0;unsigned short buttons = 0;EventTarget ?relatedTarget =null ; };
screenX
, of type long, defaulting to0
-
Initializes the
screenX
attribute of theMouseEvent
object to the desired horizontal relative position of the mouse pointer on the user’s screen.Initializing the event object to the given mouse position must not move the user’s mouse pointer to the initialized position.
screenY
, of type long, defaulting to0
-
Initializes the
screenY
attribute of theMouseEvent
object to the desired vertical relative position of the mouse pointer on the user’s screen.Initializing the event object to the given mouse position must not move the user’s mouse pointer to the initialized position.
clientX
, of type long, defaulting to0
-
Initializes the
clientX
attribute of theMouseEvent
object to the desired horizontal position of the mouse pointer relative to the client window of the user’s browser.Initializing the event object to the given mouse position must not move the user’s mouse pointer to the initialized position.
clientY
, of type long, defaulting to0
-
Initializes the
clientY
attribute of theMouseEvent
object to the desired vertical position of the mouse pointer relative to the client window of the user’s browser.Initializing the event object to the given mouse position must not move the user’s mouse pointer to the initialized position.
button
, of type short, defaulting to0
-
Initializes the
button
attribute of theMouseEvent
object to a number representing the desired state of the button(s) of the mouse.The value 0 is used to represent the primary mouse button, 1 is used to represent the auxiliary/middle mouse button, and 2 to represent the right mouse button. Numbers greater than 2 are also possible, but are not specified in this document.
buttons
, of type unsigned short, defaulting to0
-
Initializes the
buttons
attribute of theMouseEvent
object to a number representing one or more of the button(s) of the mouse that are to be considered active.The
buttons
attribute is a bit-field. If a mask value of 1 is true when applied to the value of the bit field, then the primary mouse button is down. If a mask value of 2 is true when applied to the value of the bit field, then the right mouse button is down. If a mask value of 4 is true when applied to the value of the bit field, then the auxiliary/middle button is down.In JavaScript, to initialize the
buttons
attribute as if the right (2) and middle button (4) were being pressed simultaneously, the buttons value can be assigned as either:
{ buttons: 2 | 4 }
or:
{ buttons: 6 }
relatedTarget
, of type EventTarget, nullable, defaulting tonull
- The
relatedTarget
should be initialized to the element whose bounds the mouse pointer just left (in the case of a mouseover or mouseenter event) or the element whose bounds the mouse pointer is entering (in the case of a mouseout or mouseleave or focusout event). For other events, this value need not be assigned (and will default to null).
Implementations MUST maintain the current click count when generating mouse events. This MUST be a non-negative integer indicating the number of consecutive clicks of a pointing device button within a specific time. The delay after which the count resets is specific to the environment configuration.
3.2. Event Modifier Initializers
The MouseEvent
and KeyboardEvent
interfaces share a set of
keyboard modifier attributes and support a mechanism for retrieving
additional modifier states. The following dictionary enables authors to
initialize keyboard modifier attributes of the MouseEvent
and KeyboardEvent
interfaces, as well as the additional modifier states
queried via getModifierState()
. The steps for
constructing events using this dictionary are defined in the event constructors section.
dictionary :
EventModifierInit UIEventInit {boolean ctrlKey =false ;boolean shiftKey =false ;boolean altKey =false ;boolean metaKey =false ;boolean modifierAltGraph =false ;boolean modifierCapsLock =false ;boolean modifierFn =false ;boolean modifierFnLock =false ;boolean modifierHyper =false ;boolean modifierNumLock =false ;boolean modifierScrollLock =false ;boolean modifierSuper =false ;boolean modifierSymbol =false ;boolean modifierSymbolLock =false ; };
ctrlKey
, of type boolean, defaulting tofalse
-
Initializes the
ctrlKey
attribute of theMouseEvent
orKeyboardEvent
objects totrue
if theControl
key modifier is to be considered active,false
otherwise.When
true
, implementations must also initialize the event object’s key modifier state such that calls to thegetModifierState()
orgetModifierState()
when provided with the parameterControl
must returntrue
. shiftKey
, of type boolean, defaulting tofalse
-
Initializes the
shiftKey
attribute of theMouseEvent
orKeyboardEvent
objects totrue
if theShift
key modifier is to be considered active,false
otherwise.When
true
, implementations must also initialize the event object’s key modifier state such that calls to thegetModifierState()
orgetModifierState()
when provided with the parameterShift
must returntrue
. altKey
, of type boolean, defaulting tofalse
-
Initializes the
altKey
attribute of theMouseEvent
orKeyboardEvent
objects totrue
if theAlt
(alternative) (orOption
) key modifier is to be considered active,false
otherwise.When
true
, implementations must also initialize the event object’s key modifier state such that calls to thegetModifierState()
orgetModifierState()
when provided with the parameterAlt
must returntrue
. metaKey
, of type boolean, defaulting tofalse
-
Initializes the
metaKey
attribute of theMouseEvent
orKeyboardEvent
objects totrue
if theMeta
key modifier is to be considered active,false
otherwise.When
true
, implementations must also initialize the event object’s key modifier state such that calls to thegetModifierState()
orgetModifierState()
when provided with either the parameterMeta
must returntrue
. modifierAltGraph
, of type boolean, defaulting tofalse
- Initializes the event object’s key modifier state such that calls to the
getModifierState()
orgetModifierState()
when provided with the parameterAltGraph
must returntrue
. modifierCapsLock
, of type boolean, defaulting tofalse
- Initializes the event object’s key modifier state such that calls to the
getModifierState()
orgetModifierState()
when provided with the parameterCapsLock
must returntrue
. modifierFn
, of type boolean, defaulting tofalse
- Initializes the event object’s key modifier state such that calls to the
getModifierState()
orgetModifierState()
when provided with the parameterFn
must returntrue
. modifierFnLock
, of type boolean, defaulting tofalse
- Initializes the event object’s key modifier state such that calls to the
getModifierState()
orgetModifierState()
when provided with the parameterFnLock
must returntrue
. modifierHyper
, of type boolean, defaulting tofalse
- Initializes the event object’s key modifier state such that calls to the
getModifierState()
orgetModifierState()
when provided with the parameterHyper
must returntrue
. modifierNumLock
, of type boolean, defaulting tofalse
- Initializes the event object’s key modifier state such that calls to the
getModifierState()
orgetModifierState()
when provided with the parameterNumLock
must returntrue
. modifierScrollLock
, of type boolean, defaulting tofalse
- Initializes the event object’s key modifier state such that calls to the
getModifierState()
orgetModifierState()
when provided with the parameterScrollLock
must returntrue
. modifierSuper
, of type boolean, defaulting tofalse
- Initializes the event object’s key modifier state such that calls to the
getModifierState()
orgetModifierState()
when provided with the parameterSuper
must returntrue
. modifierSymbol
, of type boolean, defaulting tofalse
- Initializes the event object’s key modifier state such that calls to the
getModifierState()
orgetModifierState()
when provided with the parameterSymbol
must returntrue
. modifierSymbolLock
, of type boolean, defaulting tofalse
- Initializes the event object’s key modifier state such that calls to the
getModifierState()
orgetModifierState()
when provided with the parameterSymbolLock
must returntrue
.
3.3. Mouse Event Order
Certain mouse events defined in this specification MUST occur in a set order relative to one another. The following shows the event sequence that MUST occur when a pointing device’s cursor is moved over an element:
Event Type | Element | Notes | |
---|---|---|---|
1 | mousemove
| ||
Pointing device is moved into element A... | |||
2 | mouseover
| A | |
3 | mouseenter
| A | |
4 | mousemove
| A | Multiple mousemove events
|
Pointing device is moved out of element A... | |||
5 | mouseout
| A | |
6 | mouseleave
| A |
When a pointing device is moved into an element A, and then into a nested element B and then back out again, the following sequence of events MUST occur:
Event Type | Element | Notes | |
---|---|---|---|
1 | mousemove
| ||
Pointing device is moved into element A... | |||
2 | mouseover
| A | |
3 | mouseenter
| A | |
4 | mousemove
| A | Multiple mousemove events
|
Pointing device is moved into nested element B... | |||
5 | mouseout
| A | |
6 | mouseover
| B | |
7 | mouseenter
| B | |
8 | mousemove
| B | Multiple mousemove events
|
Pointing device is moved from element B into A... | |||
9 | mouseout
| B | |
10 | mouseleave
| B | |
11 | mouseover
| A | |
12 | mousemove
| A | Multiple mousemove events
|
Pointing device is moved out of element A... | |||
13 | mouseout
| A | |
14 | mouseleave
| A |
Sometimes elements can be visually overlapped using CSS. In the following example, three elements labeled A, B, and C all have the same dimensions and absolute position on a web page. Element C is a child of B, and B is a child of A in the DOM:
When the pointing device is moved from outside the element stack to the element labeled C and then moved out again, the following series of events MUST occur:
Event Type | Element | Notes | |
---|---|---|---|
1 | mousemove
| ||
Pointing device is moved into element C, the topmost element in the stack | |||
2 | mouseover
| C | |
3 | mouseenter
| A | |
4 | mouseenter
| B | |
5 | mouseenter
| C | |
6 | mousemove
| C | Multiple mousemove events
|
Pointing device is moved out of element C... | |||
7 | mouseout
| C | |
8 | mouseleave
| C | |
9 | mouseleave
| B | |
10 | mouseleave
| A |
The mouseover
/mouseout
events are only fired once, while mouseenter
/mouseleave
events are fired three times (once
to each element).
The following is the typical sequence of events when a button associated with a pointing device (e.g., a mouse button or trackpad) is pressed and released over an element:
Event Type | Notes | |
---|---|---|
1 | mousedown
| |
2 | mousemove
| OPTIONAL, multiple events, some limits |
3 | mouseup
| |
4 | click
| |
5 | mousemove
| OPTIONAL, multiple events, some limits |
6 | mousedown
| |
7 | mousemove
| OPTIONAL, multiple events, some limits |
8 | mouseup
| |
9 | click
| |
10 | dblclick
|
The lag time, degree, distance, and number of mousemove
events
allowed between the mousedown
and mouseup
events while
still firing a click
or dblclick
event will be
implementation-, device-, and platform-specific. This tolerance can aid
users that have physical disabilities like unsteady hands when these
users interact with a pointing device.
Each implementation will determine the appropriate hysteresis tolerance, but in general SHOULD fire click
and dblclick
events when the event target of the associated mousedown
and mouseup
events is the same element with no mouseout
or mouseleave
events intervening, and SHOULD fire click
and dblclick
events on the nearest common inclusive ancestor when the
associated mousedown
and mouseup
event targets are
different.
If a mousedown
event was targeted at an HTML document’s body
element, and the corresponding mouseup
event was targeted at
the root element, then the click
event will be dispatched
to the root element, since it is the nearest common inclusive
ancestor.
If the event target (e.g. the target element) is removed from the DOM during the mouse events sequence, the remaining events of the sequence MUST NOT be fired on that element.
If the target element is removed from the DOM as the result of a mousedown
event, no events for that element will be dispatched
for mouseup
, click
, or dblclick
, nor any default
activation events. However, the mouseup
event will still be
dispatched on the element that is exposed to the mouse after the removal
of the initial target element. Similarly, if the target element is
removed from the DOM during the dispatch of a mouseup
event, the click
and subsequent events will not be dispatched.
3.4. Mouse Event Types
The Mouse event types are listed below. In the case of nested elements, mouse event types are always targeted at the most deeply nested element. Ancestors of the targeted element MAY use bubbling to obtain notification of mouse events which occur within its descendent elements.
3.4.1. auxclick
Type | auxclick
|
---|---|
Interface | PointerEvent
|
Sync / Async | Sync |
Bubbles | Yes |
Trusted Targets | Element
|
Cancelable | Yes |
Composed | Yes |
Default action | Varies |
Context (trusted events) |
|
The auxclick
event type MUST be dispatched on the topmost
event target indicated by the pointer, when the user presses
down and releases the non-primary pointer button, or otherwise activates
the pointer in a manner that simulates such an action. The actuation
method of the mouse button depends upon the pointer device and the
environment configuration, e.g., it MAY depend on the screen
location or the delay between the press and release of the pointing
device button.
The auxclick
event should only be fired for the non-primary pointer
buttons (i.e., when button
value is not 0
, buttons
value is greater than 1
). The primary button
(like the left button on a standard mouse) MUST NOT fire auxclick
events. See click
for a corresponding event that
is associated with the primary button.
The auxclick
event MAY be preceded by the mousedown
and mouseup
events on the same element, disregarding changes
between other node types (e.g., text nodes). Depending upon the
environment configuration, the auxclick
event MAY be dispatched
if one or more of the event types mouseover
, mousemove
, and mouseout
occur between the press and
release of the pointing device button.
The default action of the auxclick
event type varies
based on the event target of the event and the value of the button
or buttons
attributes. Typical default actions of the auxclick
event type are as follows:
-
If the event target has associated activation behavior, the default action MUST be to execute that activation behavior (see § 8.1.1 Activation triggers and behavior).
Receiving and handling auxclick for the middle button.
myLink.addEventListener("auxclick", function(e) {
if (e.button === 1) {
// This would prevent the default behavior which is for example
// opening a new tab when middle clicking on a link.
e.preventDefault();
// Do something else to handle middle button click like taking
// care of opening link or non-link buttons in new tabs in a way
// that fits the app. Other actions like closing a tab in a tab-strip
// which should be done on the click action can be done here too.
}
});
In the case of right button, the auxclick
event is dispatched after
any contextmenu
event. Note that some user agents swallow all input
events while a context menu is being displayed, so auxclick may not be
available to applications in such scenarios.
See this example for more clarification.
Receiving and handling auxclick for the right button
myDiv.addEventListener("contextmenu", function(e) {
// This call makes sure no context menu is shown
// to interfere with page receiving the events.
e.preventDefault();
});
myDiv.addEventListener("auxclick", function(e) {
if (e.button === 2) {
// Do something else to handle right button click like opening a
// customized context menu inside the app.
}
});
3.4.2. click
Type | click
|
---|---|
Interface | PointerEvent
|
Sync / Async | Sync |
Bubbles | Yes |
Trusted Targets | Element
|
Cancelable | Yes |
Composed | Yes |
Default action | Varies |
Context (trusted events) |
|
The click
event type MUST be dispatched on the topmost
event target indicated by the pointer, when the user presses
down and releases the primary pointer button, or otherwise activates
the pointer in a manner that simulates such an action. The actuation
method of the mouse button depends upon the pointer device and the
environment configuration, e.g., it MAY depend on the screen
location or the delay between the press and release of the pointing
device button.
The click
event should only be fired for the primary pointer
button (i.e., when button
value is 0
, buttons
value is 1
). Secondary buttons
(like the middle or right button on a standard mouse) MUST NOT fire click
events. See auxclick
for a corresponding event that
is associated with the non-primary buttons.
The click
event MAY be preceded by the mousedown
and mouseup
events on the same element, disregarding changes
between other node types (e.g., text nodes). Depending upon the
environment configuration, the click
event MAY be dispatched
if one or more of the event types mouseover
, mousemove
, and mouseout
occur between the press and
release of the pointing device button. The click
event MAY
also be followed by the dblclick
event.
If a user mouses down on a text node child of a <p>
element which has been styled with a large
line-height, shifts the mouse slightly such that it is no longer
over an area containing text but is still within the containing
block of that <p>
element (i.e., the pointer is
between lines of the same text block, but not over the text node per
se), then subsequently mouses up, this will likely still trigger a click
event (if it falls within the normal temporal hysteresis for a click
), since the user has stayed
within the scope of the same element. Note that user-agent-generated
mouse events are not dispatched on text nodes.
In addition to being associated with pointer devices, the click
event type MUST be dispatched as part of an element
activation, as described in § 8.1.1 Activation triggers and behavior.
For maximum accessibility, content authors are encouraged to use the click
event type when defining activation behavior for custom
controls, rather than other pointing-device event types such as mousedown
or mouseup
, which are more device-specific.
Though the click
event type has its origins in pointer
devices (e.g., a mouse), subsequent implementation enhancements have
extended it beyond that association, and it can be considered a
device-independent event type for element activation.
The default action of the click
event type varies
based on the event target of the event and the value of the button
or buttons
attributes. Typical default actions of the click
event type are as follows:
-
If the event target has associated activation behavior, the default action MUST be to execute that activation behavior (see § 8.1.1 Activation triggers and behavior).
-
If the event target is focusable, the default action MUST be to give that element document focus.
3.4.3. contextmenu
Type | contextmenu
|
---|---|
Interface | PointerEvent
|
Sync / Async | Sync |
Bubbles | Yes |
Trusted Targets | Element
|
Cancelable | Yes |
Composed | Yes |
Default action | Invoke a context menu if supported. |
Context (trusted events) |
|
A user agent MUST dispatch this event before invoking a context menu.
When the contextmenu
event is triggered by right mouse button, the contextmenu
event MUST be dispatched after the mousedown
event.
Depending on the platform, the contextmenu
event may be dispatched
before or after the mouseup
event.
3.4.4. dblclick
Type | dblclick
|
---|---|
Interface | MouseEvent
|
Sync / Async | Sync |
Bubbles | Yes |
Trusted Targets | Element
|
Cancelable | Yes |
Composed | Yes |
Default action | None |
Context (trusted events) |
|
A user agent MUST dispatch this event when the primary button
of a pointing device is clicked twice over an element. The
definition of a double click depends on the environment
configuration, except that the event target MUST be the same between mousedown
, mouseup
, and dblclick
. This event
type MUST be dispatched after the event type click
if a click
and double click occur simultaneously, and after the event type mouseup
otherwise.
As with the click
event, the dblclick
event should
only be fired for the primary pointer button. Secondary buttons MUST
NOT fire dblclick
events.
Canceling the click
event does not affect the firing of a dblclick
event.
As with the click
event type, the default action of
the dblclick
event type varies based on the event
target of the event and the value of the button
or buttons
attributes. The typical default actions of the dblclick
event type match those
of the click
event type.
3.4.5. mousedown
Type | mousedown
|
---|---|
Interface | MouseEvent
|
Sync / Async | Sync |
Bubbles | Yes |
Trusted Targets | Element
|
Cancelable | Yes |
Composed | Yes |
Default action | Varies: Start a drag/drop operation; start a text selection; start a scroll/pan interaction (in combination with the middle mouse button, if supported) |
Context (trusted events) |
|
A user agent MUST dispatch this event when a pointing device button is pressed over an element.
Many implementations use the mousedown
event to begin a
variety of contextually dependent default actions. These
default actions can be prevented if this event is canceled. Some of
these default actions could include: beginning a drag/drop
interaction with an image or link, starting text selection, etc.
Additionally, some implementations provide a mouse-driven panning
feature that is activated when the middle mouse button is pressed at
the time the mousedown
event is dispatched.
3.4.6. mouseenter
Type | mouseenter
|
---|---|
Interface | MouseEvent
|
Sync / Async | Sync |
Bubbles | No |
Trusted Targets | Element
|
Cancelable | No |
Composed | No |
Default action | None |
Context (trusted events) |
|
A user agent MUST dispatch this event when a pointing device
is moved onto the boundaries of an element or one of its descendent
elements. A user agent MUST also dispatch this event when the
element or one of its descendants moves to be underneath the primary
pointing device. This event type is similar to mouseover
, but
differs in that it does not bubble, and MUST NOT be dispatched when
the pointer device moves from an element onto the boundaries of one
of its descendent elements.
There are similarities between this event type and the CSS :hover
pseudo-class [CSS2].
See also the mouseleave
event type.
3.4.7. mouseleave
Type | mouseleave
|
---|---|
Interface | MouseEvent
|
Sync / Async | Sync |
Bubbles | No |
Trusted Targets | Element
|
Cancelable | No |
Composed | No |
Default action | None |
Context (trusted events) |
|
A user agent MUST dispatch this event when a pointing device
is moved off of the boundaries of an element and all of its
descendent elements. A user agent MUST also dispatch this event
when the element or one of its descendants moves to be no longer underneath
the primary pointing device. This event type is similar to mouseout
,
but differs in that does not bubble, and that it MUST NOT be
dispatched until the pointing device has left the boundaries of the
element and the boundaries of all of its children.
There are similarities between this event type and the CSS :hover
pseudo-class [CSS2].
See also the mouseenter
event type.
3.4.8. mousemove
Type | mousemove
|
---|---|
Interface | MouseEvent
|
Sync / Async | Sync |
Bubbles | Yes |
Trusted Targets | Element
|
Cancelable | Yes |
Composed | Yes |
Default action | None |
Context (trusted events) |
|
A user agent MUST dispatch this event when a pointing device
is moved while it is over an element. The frequency rate of events
while the pointing device is moved is implementation-, device-, and
platform-specific, but multiple consecutive mousemove
events
SHOULD be fired for sustained pointer-device movement, rather than a
single event for each instance of mouse movement. Implementations
are encouraged to determine the optimal frequency rate to balance
responsiveness with performance.
In some implementation environments, such as a browser, mousemove
events can continue to fire if the user began a
drag operation (e.g., a mouse button is pressed) and the pointing
device has left the boundary of the user agent.
This event was formerly specified to be non-cancelable in DOM Level 2 Events, but was changed to reflect existing interoperability between user agents.
3.4.9. mouseout
Type | mouseout
|
---|---|
Interface | MouseEvent
|
Sync / Async | Sync |
Bubbles | Yes |
Trusted Targets | Element
|
Cancelable | Yes |
Composed | Yes |
Default action | None |
Context (trusted events) |
|
A user agent MUST dispatch this event when a pointing device
is moved off of the boundaries of an element or when the element is
moved to be no longer underneath the primary pointing device.
This event type is similar to mouseleave
, but differs in that
does bubble, and that it MUST be dispatched when the pointer device
moves from an element onto the boundaries of one of its descendent elements.
See also the mouseover
event type.
3.4.10. mouseover
Type | mouseover
|
---|---|
Interface | MouseEvent
|
Sync / Async | Sync |
Bubbles | Yes |
Trusted Targets | Element
|
Cancelable | Yes |
Composed | Yes |
Default action | None |
Context (trusted events) |
|
A user agent MUST dispatch this event when a pointing device
is moved onto the boundaries of an element or when the element is
moved to be underneath the primary pointing device.
This event type is similar to mouseenter
, but differs in
that it bubbles, and that it MUST be dispatched when the pointer device moves onto the
boundaries of an element whose ancestor element is the event
target for the same event listener instance.
See also the mouseout
event type.
3.4.11. mouseup
Type | mouseup
|
---|---|
Interface | MouseEvent
|
Sync / Async | Sync |
Bubbles | Yes |
Trusted Targets | Element
|
Cancelable | Yes |
Composed | Yes |
Default action | None |
Context (trusted events) |
|
A user agent MUST dispatch this event when a pointing device button is released over an element.
In some implementation environments, such as a browser, a mouseup
event can be dispatched even if the pointing device
has left the boundary of the user agent, e.g., if the user began a
drag operation with a mouse button pressed.
4. Constructing Mouse and Keyboard Events
Generally, when a constructor of an Event
interface, or of an interface
inherited from the Event
interface, is invoked, the steps described in [DOM] should be followed. However the KeyboardEvent
and MouseEvent
interfaces provide additional dictionary members for
initializing the internal state of the Event
object’s key modifiers:
specifically, the internal state queried for using the getModifierState()
and getModifierState()
methods. This section supplements the DOM4 steps for intializing a new Event
object with these optional modifier states.
For the purposes of constructing a KeyboardEvent
, MouseEvent
, or
object derived from these objects using the algorithm below, all KeyboardEvent
, MouseEvent
, and derived objects have internal key modifier state which can be set and
retrieved using the key modifier names described in the Modifier Keys table in [UIEvents-Key].
The following steps supplement the algorithm defined for constructing events in DOM4:
-
If the
Event
being constructed is aKeyboardEvent
orMouseEvent
object or an object that derives from either of these, and aEventModifierInit
argument was provided to the constructor, then run the following sub-steps:-
For each
EventModifierInit
argument, if the dictionary member begins with the string"modifier"
, then let the key modifier name be the dictionary member’s name excluding the prefix"modifier"
, and set theEvent
object’s internal key modifier state that matches the key modifier name to the corresponding value.
-
5. Legacy Event Initializers
This section is normative.
The following features are obsolete and should only be implemented by user agents that require compatibility with legacy software.
Early versions of this specification included an initialization method on
the interface (for example initMouseEvent
) that required a long
list of parameters that, in most cases, did not fully initialize all
attributes of the event object. Because of this, event interfaces which were
derived from the basic Event
interface required that the initializer of each of the derived interfaces be called explicitly in order to
fully initialize an event.
initEvent
and initMutationEvent
. Due in part to the length of time in the development of this standard, some implementations MAY have taken a dependency on these (now deprecated) initializer methods. For completeness, these legacy event initializers are described in this section.
5.1. Initializers for interface MouseEvent
This section is informative
partial interface MouseEvent { // Deprecated in this specificationundefined initMouseEvent (DOMString ,
typeArg optional boolean =
bubblesArg false ,optional boolean =
cancelableArg false ,optional Window ?=
viewArg null ,optional long = 0,
detailArg optional long = 0,
screenXArg optional long = 0,
screenYArg optional long = 0,
clientXArg optional long = 0,
clientYArg optional boolean =
ctrlKeyArg false ,optional boolean =
altKeyArg false ,optional boolean =
shiftKeyArg false ,optional boolean =
metaKeyArg false ,optional short = 0,
buttonArg optional EventTarget ?=
relatedTargetArg null ); };
initMouseEvent(typeArg)
-
Initializes attributes of a
MouseEvent
object. This method has the same behavior asUIEvent.initUIEvent()
.The
initMouseEvent
method is deprecated, but supported for backwards-compatibility with widely-deployed implementations.- DOMString typeArg
- Refer to the
initEvent()
method for a description of this parameter. - boolean bubblesArg
- Refer to the
initEvent()
method for a description of this parameter. - boolean cancelableArg
- Refer to the
initEvent()
method for a description of this parameter. - Window? viewArg
- Specifies
view
. This value MAY benull
. - long detailArg
- Specifies
detail
. - long screenXArg
- Specifies
screenX
. - long screenYArg
- Specifies
screenY
. - long clientXArg
- Specifies
clientX
. - long clientYArg
- Specifies
clientY
. - boolean ctrlKeyArg
- Specifies
ctrlKey
. - boolean altKeyArg
- Specifies
altKey
. - boolean shiftKeyArg
- Specifies
shiftKey
. - boolean metaKeyArg
- Specifies
metaKey
. - short buttonArg
- Specifies
button
. - EventTarget? relatedTargetArg
- Specifies
relatedTarget
. This value MAY benull
.
6. Security Considerations
TODO - Add specific concerns for this spec
7. Acknowledgements
TODO
8. Refs to other UIEvent specs [DELETE]
This section will be deleted.
Temporary place to "define" other referenced UI Events (to make the bikeshed linker happy). This will be deleted once we have proper cross-references.
8.1. Things defined in other sections
8.1.1. Activation triggers and behavior
8.1.2. Composition Events
8.1.3. Default actions and cancelable events
8.1.4. Event dispatch and DOM event flow
8.1.5. Web browsers and other dynamic or interactive user agents
8.1.6. Authoring tools
8.2. Things defined in KeyboardEvents
8.2.1. Modifier keys
9. Glossary [DELETE]
This section will be deleted.
Temporary glossary terms (for bikeshed linker). Many of these are properly defined elsewhere and should be linked to directly. Terms which should be defined in this spec should be defined inline.
- activation behavior
-
The action taken when an event, typically initiated by users through an input device, causes an element to fulfill a defined task. The task MAY be defined for that element by the host language, or by author-defined variables, or both. The default task for any given element MAY be a generic action, or MAY be unique to that element. For example, the activation behavior of an HTML or SVG
<a>
element is to cause the user agent to traverse the link specified in thehref
attribute, with the further optional parameter of specifying the browsing context for the traversal (such as the current window or tab, a named window, or a new window). The activation behavior of an HTML<input>
element with thetype
attribute valuesubmit
is be to send the values of the form elements to an author-defined IRI by the author-defined HTTP method. See § 8.1.1 Activation triggers and behavior for more details. - activation trigger
-
An event which is defined to initiate an activation behavior. Refer to § 8.1.1 Activation triggers and behavior for more details.
- body element
-
In HTML or XHTML documents, the body element represents the contents of the document. In a well-formed HTML document, the body element is a first descendant of the root element.
- DOM Level 0
-
The term
DOM Level 0
refers to a mix of HTML document functionalities, often not formally specified but traditionally supported as de facto standards, implemented originally by Netscape Navigator version 3.0 or Microsoft Internet Explorer version 3.0. In many cases, attributes or methods have been included for reasons of backward compatibility withDOM Level 0
. - default action
-
A default action is an OPTIONAL supplementary behavior that an implementation MUST perform in combination with the dispatch of the event object. Each event type definition, and each specification, defines the default action for that event type, if it has one. An instance of an event MAY have more than one default action under some circumstances, such as when associated with an activation trigger. A default action MAY be cancelled through the invocation of the
preventDefault()
method. For more details, see § 8.1.3 Default actions and cancelable events. - event
-
An event is the representation of some occurrence (such as a mouse click on the presentation of an element, the removal of child node from an element, or any number of other possibilities) which is associated with its event target. Each event is an instantiation of one specific event type.
- event target
-
The object to which an event is targeted using the § 8.1.4 Event dispatch and DOM event flow. The event target is the value of the
target
attribute. - host language
-
Any language which integrates the features of another language or API specification, while normatively referencing the origin specification rather than redefining those features, and extending those features only in ways defined by the origin specification. An origin specification typically is only intended to be implemented in the context of one or more host languages, not as a standalone language. For example, XHTML, HTML, and SVG are host languages for UI Events, and they integrate and extend the objects and models defined in this specification.
- hysteresis
-
A feature of human interface design to accept input values within a certain range of location or time, in order to improve the user experience. For example, allowing for small deviation in the time it takes for a user to double-click a mouse button is temporal hysteresis, and not immediately closing a nested menu if the user mouses out from the parent window when transitioning to the child menu is locative hysteresis.
- topmost event target
-
The topmost event target MUST be the element highest in the rendering order which is capable of being an event target. In graphical user interfaces this is the element under the user’s pointing device. A user interface’s
hit testing
facility is used to determine the target. For specific details regarding hit testing and stacking order, refer to the host language. - un-initialized value
-
The value of any event attribute (such as
bubbles
orcurrentTarget
) before the event has been initialized withinitEvent()
. The un-initialized values of an event apply immediately after a new event has been created using the methodcreateEvent()
. - user agent
-
A program, such as a browser or content authoring tool, normally running on a client machine, which acts on a user’s behalf in retrieving, interpreting, executing, presenting, or creating content. Users MAY act on the content using different user agents at different times, for different purposes. See the § 8.1.5 Web browsers and other dynamic or interactive user agents and § 8.1.6 Authoring tools for details on the requirements for a conforming user agent.
- Window
-
The
Window
is the object referred to by the current document’s browsing context’s Window Proxy object as defined in HTML5 [HTML5].