Events

Adobe XD supports a subset of HTML events.

Event	MDN Link
blur	MDN docs
change	MDN docs
click	MDN docs
close	MDN docs
focus	MDN docs
input	MDN docs
keydown	MDN docs
load	MDN docs
message	MDN docs
pointerEnter	MDN docs
pointerMove	MDN docs
pointerLeave	MDN docs
progress	MDN docs
resize	MDN docs

The following event classes are supported by XD:

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 = "";
    }
});
Copied to your clipboard
1element.addEventListener("blur", evt => {
2    if (Number.isNaN(Number(evt.target.value))) {
3        evt.target.value = "";
4    }
5});


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);
});
Copied to your clipboard
1element.addEventListener("change", evt => {
2    console.log(evt.target.data);
3});


Applies to	Focusable controls (input elements, buttons)
Since	XD 13

click

Dispatched when the user clicks or taps on the element.

Danger
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.

Info
Since dialogs cannot be currently resized, this event only fires once, when the dialog is made visible.


Applies to	Dialogs (`HTMLDialogElement`)
Since	XD 13

Overview

Last updated 8/10/2021

Was this helpful?

Yes