Event Handlers

Dioxus provides comprehensive event handling for HTML elements through type-safe event handlers. All events are handled through the on* attributes.

Mouse Events

Mouse events are triggered by mouse interactions with elements.

onclick

Fired when a mouse button is clicked (pressed and released) on an element.

rsx! {
    button { 
        onclick: move |event| {
            println!("Clicked at: {:?}", event.coordinates());
        },
        "Click me"
    }
}

Event Data: MouseData

coordinates() - Element, page, client, and screen coordinates
held_buttons() - Set of mouse buttons currently held
trigger_button() - Which button triggered the event
modifiers() - Keyboard modifiers (Ctrl, Alt, Shift, Meta)

Bubbles: Yes | Cancelable: Yes Reference: MDN

ondoubleclick

Fired when a mouse button is double-clicked on an element.

rsx! {
    div { 
        ondoubleclick: move |_| println!("Double clicked!"),
        "Double click me"
    }
}

Event Data: MouseData Reference: MDN

oncontextmenu

Fired when the right mouse button is clicked (before context menu appears).

rsx! {
    div { 
        oncontextmenu: move |event| {
            event.prevent_default();
            println!("Custom context menu");
        },
        "Right click me"
    }
}

Event Data: MouseData Reference: MDN

onmousedown

Fired when a mouse button is pressed on an element.

rsx! {
    div { 
        onmousedown: move |event| {
            println!("Mouse down: {:?}", event.trigger_button());
        },
        "Press mouse here"
    }
}

Event Data: MouseData Reference: MDN

onmouseup

Fired when a mouse button is released on an element.

rsx! {
    div { onmouseup: move |_| println!("Mouse up"), "Release here" }
}

Event Data: MouseData Reference: MDN

onmousemove

Fired when the mouse pointer moves over an element.

rsx! {
    div { 
        onmousemove: move |event| {
            let coords = event.element_coordinates();
            println!("Mouse at: ({}, {})", coords.x, coords.y);
        },
        "Move mouse here"
    }
}

Event Data: MouseData Reference: MDN

onmouseenter

Fired when the mouse pointer enters an element (does not bubble).

rsx! {
    div { onmouseenter: move |_| println!("Mouse entered"), "Hover zone" }
}

Event Data: MouseData Bubbles: No Reference: MDN

onmouseleave

Fired when the mouse pointer leaves an element (does not bubble).

rsx! {
    div { onmouseleave: move |_| println!("Mouse left"), "Hover zone" }
}

Event Data: MouseData Bubbles: No Reference: MDN

onmouseover

Fired when the mouse pointer moves onto an element (bubbles).

rsx! {
    div { onmouseover: move |_| println!("Mouse over"), "Content" }
}

Event Data: MouseData Reference: MDN

onmouseout

Fired when the mouse pointer moves out of an element (bubbles).

rsx! {
    div { onmouseout: move |_| println!("Mouse out"), "Content" }
}

Event Data: MouseData Reference: MDN

Keyboard Events

Keyboard events are triggered by keyboard interactions.

onkeydown

Fired when a key is pressed down.

use dioxus::prelude::*;
use keyboard_types::{Code, Key};

rsx! {
    input { 
        onkeydown: move |event| {
            if event.key() == Key::Enter {
                println!("Enter pressed!");
            }
            if event.code() == Code::KeyA && event.modifiers().ctrl() {
                println!("Ctrl+A pressed!");
            }
        }
    }
}

Event Data: KeyboardData

key() - Key value (considers modifiers and layout)
code() - Physical key code
location() - Physical location of the key
is_auto_repeating() - Whether the key is being held
is_composing() - Whether key is part of composition
modifiers() - Active modifier keys (Ctrl, Alt, Shift, Meta)

Reference: MDN

onkeyup

Fired when a key is released.

rsx! {
    input { onkeyup: move |event| println!("Key: {:?}", event.key()) }
}

Event Data: KeyboardData Reference: MDN

onkeypress

Fired when a key that produces a character value is pressed down.

rsx! {
    input { onkeypress: move |event| println!("Char: {:?}", event.key()) }
}

Event Data: KeyboardData Note: This event is deprecated in favor of onkeydown. Reference: MDN

Form Events

Form events are triggered by form control interactions.

oninput

Fired when the value of an input, select, or textarea changes.

let mut value = use_signal(|| String::new());

rsx! {
    input {
        value: "{value}",
        oninput: move |event| value.set(event.value())
    }
    p { "Value: {value}" }
}

Event Data: FormData

value() - Current value as string
parsed<T>() - Parse value to type T
checked() - For checkboxes (returns bool)
values() - All form values (for forms)
files() - Selected files (for file inputs)

Reference: MDN

onchange

Fired when the value of an input element is committed.

rsx! {
    input { 
        onchange: move |event| {
            println!("Changed to: {}", event.value());
        }
    }
}

Event Data: FormData Difference from oninput: onchange fires when the value is committed (e.g., on blur for text inputs), while oninput fires on every change. Reference: MDN

onsubmit

Fired when a form is submitted.

rsx! {
    form {
        onsubmit: move |event| {
            event.prevent_default();
            let values = event.values();
            println!("Form submitted: {:?}", values);
        },
        input { name: "username" }
        button { r#type: "submit", "Submit" }
    }
}

Event Data: FormData Reference: MDN

onreset

Fired when a form is reset.

rsx! {
    form {
        onreset: move |_| println!("Form reset"),
        button { r#type: "reset", "Reset" }
    }
}

Event Data: FormData Reference: MDN

oninvalid

Fired when a form control fails validation.

rsx! {
    input {
        required: true,
        oninvalid: move |_| println!("Invalid input!")
    }
}

Event Data: FormData Reference: MDN

Focus Events

Focus events are triggered when elements gain or lose focus.

onfocus

Fired when an element receives focus (does not bubble).

rsx! {
    input { onfocus: move |_| println!("Input focused") }
}

Event Data: FocusData Bubbles: No Reference: MDN

onblur

Fired when an element loses focus (does not bubble).

rsx! {
    input { onblur: move |_| println!("Input blurred") }
}

Event Data: FocusData Bubbles: No Reference: MDN

onfocusin

Fired when an element is about to receive focus (bubbles).

rsx! {
    div { 
        onfocusin: move |_| println!("Focus entering"),
        input {}
    }
}

Event Data: FocusData Reference: MDN

onfocusout

Fired when an element is about to lose focus (bubbles).

rsx! {
    div { 
        onfocusout: move |_| println!("Focus leaving"),
        input {}
    }
}

Event Data: FocusData Reference: MDN

Clipboard Events

Clipboard events are triggered by clipboard operations.

oncopy

Fired when content is copied.

rsx! {
    div { oncopy: move |_| println!("Content copied"), "Copy this text" }
}

Event Data: ClipboardData Reference: MDN

oncut

Fired when content is cut.

rsx! {
    input { oncut: move |_| println!("Content cut") }
}

Event Data: ClipboardData Reference: MDN

onpaste

Fired when content is pasted.

rsx! {
    input { onpaste: move |_| println!("Content pasted") }
}

Event Data: ClipboardData Reference: MDN

Drag Events

Drag events are triggered during drag-and-drop operations.