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 = "";
    }
});

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);
});

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.

close

Dispatched when a websocket is closed.

focus

Dispatched whenever a focusable control receives focus.

input

Dispatched whenever there is input in an input control. This will fire with every change.

keydown

Dispatched whenever a key is pressed.

load

Dispatched when the element has loaded.

message

Dispatched when a websocket receives a message.

pointerEnter

Dispatched when the mouse cursor enters the element's bounds.

pointerMove

Dispatched when the mouse cursor moves within the element's bounds.

pointerLeave

Dispatched when the mouse cursor leaves the element's bounds.

progress

Dispatched whenever there is some progress to report in an XMLHttpRequest transfer.

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.