Module events

Expand description

§Event Handlers

Event Handlers let you react to user input in your application. In Dioxus, event handlers accept a closure that is called when the event occurs:

use dioxus::prelude::*;

fn App() -> Element {
    rsx! {
        button {
            // The `onclick` event accepts a closure with the signature `fn(Event)`
            onclick: |event_data| println!("clicked! I got the event data: {event_data:?}"),
            "Click me"
        }
    }
}

§Event Lifetimes

Events take a closure with the 'static lifetime. This means that the closure can only access data that either exists for the entire lifetime of the application, or data that you move into the closure.

State in dioxus is copy which makes it very easy to move into 'static closures like event handlers:

let mut count = use_signal(|| 0);

rsx! {
    button {
        // Since we added the `move` keyword, the closure will move the `count` signal into the closure
        onclick: move |_| {
            // This will panic because the `count` signal is not in scope
            count.set(count() + 1);
        },
        "Click me"
    }
};

If you need to access data that is not Copy, you may need to clone the data before you move it into the closure:

// String is not `Copy`
let string = "hello world".to_string();

rsx! {
    button {
        // The string only has one owner. We could move it into this closure, but since we want to use the string in other closures later, we will clone it instead
        onclick: {
            // Clone the string in a new block
            let string = string.clone();
            // Then move the cloned string into the closure
            move |_| println!("{}", string)
        },
        "Print hello world"
    }
    button {
        // We don't use the string after this closure, so we can just move it into the closure directly
        onclick: move |_| println!("{}", string),
        "Print hello world again"
    }
};

§Async Event Handlers

In addition to closures that return nothing, you can also use async closures to handle events. If you return an async block from an event handler, dioxus will automatically spawn it:

use dioxus::prelude::*;

fn App() -> Element {
    rsx! {
        button {
            // The `onclick` event can also accept a closure that returns an async block
            onclick: move |_| async move {
                tokio::time::sleep(std::time::Duration::from_secs(1)).await;
                println!("You clicked the button one second ago!");
            },
            "Click me"
        }
    }
}

Structs§

AnimationData
ClipboardData
CompositionData
DOMRect
DragData: The DragEvent interface is a DOM event that represents a drag and drop interaction. The user initiates a drag by placing a pointer device (such as a mouse) on the touch surface and then dragging the pointer to a new location (such as another DOM element). Applications are free to interpret a drag and drop interaction in an application-specific way.
FocusData
FormData
FormValue: A form value that may either be a list of values or a single value
ImageData
KeyboardData
MediaData
MountedData: An Element that has been rendered and allows reading and modifying information about it.
MouseData: A synthetic event that wraps a web-style MouseEvent Data associated with a mouse event
PlatformEventData: A platform specific event.
PointerData
ResizeData
ScrollData
SelectionData
SerializedAnimationData: A serialized version of AnimationData
SerializedClipboardData: A serialized version of ClipboardData
SerializedCompositionData: A serialized version of CompositionData
SerializedDragData: A serialized version of DragData
SerializedFocusData: A serialized version of FocusData
SerializedFormData: A serialized form data object
SerializedImageData: A serialized version of ImageData
SerializedKeyboardData: A serialized version of KeyboardData
SerializedMediaData: A serialized version of MediaData
SerializedMouseData: A serialized version of MouseData
SerializedPointerData: A serialized version of PointerData
SerializedResizeData: A serialized version of ResizeData
SerializedScrollData: A serialized version of ScrollData
SerializedSelectionData: A serialized version of SelectionData
SerializedToggleData: A serialized version of ToggleData
SerializedTouchData: A serialized version of TouchData
SerializedTransitionData: A serialized version of TransitionData
SerializedVisibleData: A serialized version of VisibleData
SerializedWheelData: A serialized version of WheelData
ToggleData
TouchData
TouchPoint
TransitionData
VisibleData
WheelData: Data associated with a WheelEvent

Enums§

KeyCode
MountedError: The error type for the MountedData
ResizeError: The error type for the MountedData
ScrollBehavior: The way that scrolling should be performed
VisibleError: The error type for the VisibleData

Traits§

HasAnimationData: A trait for any object that has the data for an animation event
HasClipboardData
HasCompositionData: A trait for any object that has the data for a composition event
HasDragData: A trait for any object that has the data for a drag event
HasFocusData
HasFormData: An object that has all the data for a form event
HasImageData: A trait for any object that has the data for an image event
HasKeyboardData
HasMediaData
HasMouseData: A trait for any object that has the data for a mouse event
HasPointerData: A trait for any object that has the data for a pointer event
HasResizeData
HasScrollData
HasSelectionData
HasToggleData
HasTouchData
HasTouchPointData: A trait for touch point data
HasTransitionData
HasVisibleData
HasWheelData
HtmlEventConverter: A converter between a platform specific event and a general event. All code in a renderer that has a large binary size should be placed in this trait. Each of these functions should be snipped in high levels of optimization.
RenderedElementBacking: An Element that has been rendered and allows reading and modifying information about it.

Functions§

onabort: abort
onanimationend: onanimationend
onanimationiteration: onanimationiteration
onanimationstart: onanimationstart
onblur: onblur
oncanplay: canplay
oncanplaythrough: canplaythrough
onchange: onchange
onclick: Execute a callback when a button is clicked.
oncompositionend: oncompositionend
oncompositionstart: oncompositionstart
oncompositionupdate: oncompositionupdate
oncontextmenu: oncontextmenu
oncopy: oncopy
oncut: oncut
ondblclickDeprecated: General Event Handler Information
ondoubleclick: General Event Handler Information
ondrag: ondrag
ondragend: ondragend
ondragenter: ondragenter
ondragexit: ondragexit
ondragleave: ondragleave
ondragover: ondragover
ondragstart: ondragstart
ondrop: ondrop
ondurationchange: durationchange
onemptied: emptied
onencrypted: encrypted
onended: ended
onerror: onerror
onfocus: onfocus
onfocusin: General Event Handler Information
onfocusout: General Event Handler Information
ongotpointercapture: gotpointercapture
oninput: The oninput event is fired when the value of a <input>, <select>, or <textarea> element is changed.
oninvalid: oninvalid
onkeydown: onkeydown
onkeypress: onkeypress
onkeyup: onkeyup
onload: onload
onloadeddata: loadeddata
onloadedmetadata: loadedmetadata
onloadstart: loadstart
onlostpointercapture: lostpointercapture
onmounted: The onmounted event is fired when the element is first added to the DOM. This event gives you a MountedData object and lets you interact with the raw DOM element.
onmousedown: onmousedown
onmouseenter: onmouseenter
onmouseleave: onmouseleave
onmousemove: onmousemove
onmouseout: onmouseout
onmouseover: onmouseover
onmouseup: onmouseup
onpaste: onpaste
onpause: pause
onplay: play
onplaying: playing
onpointercancel: pointercancel
onpointerdown: pointerdown
onpointerenter: pointerenter
onpointerleave: pointerleave
onpointermove: pointermove
onpointerout: pointerout
onpointerover: pointerover
onpointerup: pointerup
onprogress: progress
onratechange: ratechange
onreset: onreset
onresize: onresize
onscroll: onscroll
onseeked: seeked
onseeking: seeking
onselect: select
onselectionchange: selectionchange
onselectstart: selectstart
onstalled: stalled
onsubmit: onsubmit
onsuspend: suspend
ontimeupdate: timeupdate
ontoggle: ontoggle
ontouchcancel: touchcancel
ontouchend: touchend
ontouchmove: touchmove
ontouchstart: touchstart
ontransitionend: transitionend
onvisible: onvisible
onvolumechange: volumechange
onwaiting: waiting
onwheel: Called when the mouse wheel is rotated over an element.
set_event_converter

Type Aliases§

AnimationEvent
ClipboardEvent
CompositionEvent
DragEvent
FocusEvent
FormEvent
ImageEvent
KeyboardEvent
MediaEvent
MountedEvent
MountedResult: The MountedResult type for the MountedData
MouseEvent
PointerEvent: A synthetic event that wraps a web-style PointerEvent
ResizeEvent
ResizeResult: The ResizeResult type for the ResizeData
ScrollEvent
SelectionEvent
ToggleEvent
TouchEvent
TransitionEvent
VisibleEvent
VisibleResult: The VisibleResult type for the VisibleData
WheelEvent: A synthetic event that wraps a web-style WheelEvent

Module eventsCopy item path