Events
Adobe XD supports a subset of HTML events.
The following event classes are supported by XD:
- BaseUIEvent
- CloseEvent
- Event
- EventTarget
- FocusEvent
- GestureEvent
- KeyboardEvent
- MessageEvent
- PointerEvent
- ProgressEvent
blur
Dispatched whenever the focus leaves the currently focused control. This can be useful if you want to validate the contents of a field immediately after entry.
element.addEventListener("blur", evt => {
if (Number.isNaN(Number(evt.target.value))) {
evt.target.value = "";
}
});
Applies to | Focusable controls (input elements, buttons) |
Since | XD 13 |
change
Dispatched after the contents of an input control change. This event only occurs after the last input to the control; so you won't see an event for every key press or mouse move.
element.addEventListener("change", evt => {
console.log(evt.target.data);
});
Applies to | Focusable controls (input elements, buttons) |
Since | XD 13 |
click
Dispatched when the user clicks or taps on the element.
Subsequent clicks may be ignored if they fall within the "double click" time span.
Applies to | All elements |
Since | XD 13 |
close
Dispatched when a websocket is closed.
Applies to | WebSocket |
Since | XD 13 |
focus
Dispatched whenever a focusable control receives focus.
Applies to | All focusable controls (input elements, buttons) |
Since | XD 13 |
input
Dispatched whenever there is input in an input control. This will fire with every change.
Applies to | All focusable controls (input elements, buttons) |
Since | XD 13 |
keydown
Dispatched whenever a key is pressed.
Applies to | All focusable controls (input elements, buttons) |
Since | XD 13 |
load
Dispatched when the element has loaded.
Applies to | Dialogs ( HTMLDialogElement ) |
Since | XD 13 |
message
Dispatched when a websocket receives a message.
Applies to | WebSocket |
Since | XD 13 |
pointerEnter
Dispatched when the mouse cursor enters the element's bounds.
Applies to | All non-interactive elements. Interactive elements do not support pointer events. |
Since | XD 13 |
pointerMove
Dispatched when the mouse cursor moves within the element's bounds.
Applies to | All non-interactive elements. Interactive elements do not support pointer events. |
Since | XD 13 |
pointerLeave
Dispatched when the mouse cursor leaves the element's bounds.
Applies to | All non-interactive elements. Interactive elements do not support pointer events. |
Since | XD 13 |
progress
Dispatched whenever there is some progress to report in an XMLHttpRequest
transfer.
Applies to | XMLHttpRequest |
Since | XD 13 |
resize
Dispatched whenever a dialog is resized.
Since dialogs cannot be currently resized, this event only fires once, when the dialog is made visible.
Applies to | Dialogs ( HTMLDialogElement ) |
Since | XD 13 |