事件系统

点击事件

rsx! {
    button {
        onclick: move |event: NativeEvent| {
            // 处理点击
        }
        "Click me"
    }
}

输入事件

rsx! {
    input {
        r#type: "text"
        placeholder: "Enter text"
        oninput: move |event: NativeEvent| {
            if let NativeEvent::Input(input_event) = event {
                let value: String = input_event.get_value().clone();
                name_signal.set(value);
            }
        }
    }
}

表单变更事件

rsx! {
    input {
        r#type: "checkbox"
        checked: agree_signal
        onchange: move |event: NativeEvent| {
            if let NativeEvent::Change(change_event) = event {
                agree_signal.set(*change_event.get_checked());
            }
        }
    }
}

支持的事件名称

类别	事件名称
鼠标	onclick, ondblclick, onmousedown, onmouseup, onmousemove, onmouseenter, onmouseleave, onmouseover, onmouseout, oncontextmenu
输入	oninput
键盘	onkeydown, onkeyup, onkeypress
焦点	onfocus, onblur, onfocusin, onfocusout
表单	onsubmit, onchange
拖拽	ondrag, ondragstart, ondragend, ondragover, ondragenter, ondragleave, ondrop
触摸	ontouchstart, ontouchend, ontouchmove, ontouchcancel
滚轮	onwheel
剪贴板	oncopy, oncut, onpaste
媒体	onplay, onpause, onended, onloadeddata, oncanplay, onvolumechange, ontimeupdate

事件数据

通过模式匹配获取具体事件数据：

move |event: NativeEvent| {
    match event {
        NativeEvent::Mouse(mouse_event) => {
            let x: i32 = mouse_event.client_x;
            let y: i32 = mouse_event.client_y;
        }
        NativeEvent::Keyboard(key_event) => {
            let key: String = key_event.key;
        }
        NativeEvent::Input(input_event) => {
            let value: String = input_event.value;
        }
        NativeEvent::Change(change_event) => {
            let value: String = change_event.value;
            let checked: bool = change_event.checked;
        }
        _ => {}
    }
}

提示

事件名在 RSX 中使用 on 前缀小写形式，如 onclick、oninput，框架自动映射到对应的事件类型。

加载中...