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"
        }
    }
}

Re-exports§

pub use super::onmounted as onmount;

Structs§

AnimationData
CancelData
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
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
ScrollToOptions: The way that scrolling should be performed
SelectionData
SerializedAnimationData: A serialized version of AnimationData
SerializedCancelData: A serialized version of CancelData
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
SerializedFormObject
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§

FormValue: A value in a form, either text or a file
KeyCode
MountedError: The error type for the MountedData
ResizeError: The error type for the MountedData
ScrollBehavior: The way that scrolling should be performed
ScrollLogicalPosition: The desired final position within the scrollable ancestor container for a given axis.
VisibleError: The error type for the VisibleData

Traits§

HasAnimationData: A trait for any object that has the data for an animation event
HasCancelData
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: onabort
onanimationend: onanimationend
onanimationiteration: onanimationiteration
onanimationstart: onanimationstart
onauxclick: onauxclick
onbeforetoggle: onbeforetoggle
onblur: onblur
oncancel: oncancel
oncanplay: oncanplay
oncanplaythrough: oncanplaythrough
onchange: onchange
onclick: onclick Execute a callback when a button is clicked.
oncompositionend: oncompositionend
oncompositionstart: oncompositionstart
oncompositionupdate: oncompositionupdate
oncontextmenu: oncontextmenu
oncopy: oncopy
oncut: oncut
ondblclickDeprecated: ondblclick
ondoubleclick: ondoubleclick
ondrag: ondrag
ondragend: ondragend
ondragenter: ondragenter
ondragexit: ondragexit
ondragleave: ondragleave
ondragover: ondragover
ondragstart: ondragstart
ondrop: ondrop
ondurationchange: ondurationchange
onemptied: onemptied
onencrypted: onencrypted
onended: onended
onerror: onerror
onfocus: onfocus
onfocusin: onfocusin
onfocusout: onfocusout
ongotpointercapture: ongotpointercapture
oninput: 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: onloadeddata
onloadedmetadata: onloadedmetadata
onloadstart: onloadstart
onlostpointercapture: onlostpointercapture
onmounted: 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 Triggered when the users’s mouse hovers over an element.
onmouseup: onmouseup
onpaste: onpaste
onpause: onpause
onplay: onplay
onplaying: onplaying
onpointercancel: onpointercancel
onpointerdown: onpointerdown
onpointerenter: onpointerenter
onpointerleave: onpointerleave
onpointermove: onpointermove
onpointerout: onpointerout
onpointerover: onpointerover
onpointerup: onpointerup
onprogress: onprogress
onratechange: onratechange
onreset: onreset
onresize: onresize
onscroll: onscroll
onscrollend: onscrollend
onseeked: onseeked
onseeking: onseeking
onselect: onselect
onselectionchange: onselectionchange
onselectstart: onselectstart
onstalled: onstalled
onsubmit: onsubmit
onsuspend: onsuspend
ontimeupdate: ontimeupdate
ontoggle: ontoggle
ontouchcancel: ontouchcancel
ontouchend: ontouchend
ontouchmove: ontouchmove
ontouchstart: ontouchstart
ontransitionend: ontransitionend
onvisible: onvisible
onvolumechange: onvolumechange
onwaiting: onwaiting
onwheel: onwheel Called when the mouse wheel is rotated over an element.
set_event_converter

Type Aliases§

AnimationEvent
CancelEvent
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 events

Module events Copy item path

§Event Handlers

§Event Lifetimes

§Async Event Handlers

Re-exports§

Structs§

Enums§

Traits§

Functions§

Type Aliases§

Module events