如何在Rust中为HTML元素添加调用JS函数的事件监听器？

要实现将已定义的JS全局函数on_event关联到Rust创建的按钮元素上，核心是获取全局作用域中的JS函数，再通过web_sys提供的事件监听方法绑定，以下是具体实现步骤：

完整代码示例 #

use wasm_bindgen::JsCast;
use web_sys::Element;

fn main() -> Result<(), wasm_bindgen::JsValue> {
    let window = web_sys::window().expect("no `window` object");
    let document = window.document().expect("no `document` object");
    let body = document.body().expect("no `body` object");

    let button = document.create_element("button")?;
    button.set_text_content(Some("点击触发事件"));

    // 1. 获取全局作用域下的`on_event` JS函数
    let on_event_func = window.get("on_event")
        .expect("全局函数on_event未在JS中定义");

    // 2. 绑定click事件与`on_event`函数
    // 方式一：使用add_event_listener（直接传入JsValue类型的函数）
    button.add_event_listener("click", &on_event_func)?;

    // 方式二：使用add_event_listener_with_callback（需转换为回调类型）
    // button.add_event_listener_with_callback("click", on_event_func.unchecked_ref())?;

    body.append_child(&button)?;
    Ok(())
}

关键说明 #

• 获取全局JS函数：由于on_event是挂载在window上的全局函数，通过window.get("on_event")可以直接获取到对应的JsValue实例。
• 事件绑定方法：
  • add_event_listener：直接接受&JsValue类型的函数，适合直接使用已存在的JS全局函数。
  • add_event_listener_with_callback：需要将JsValue转换为&dyn FnMut(Event)类型，这里通过JsCast trait提供的unchecked_ref()完成转换（因为我们明确知道该JsValue是一个合法的事件回调函数）。
• 依赖要求：确保引入wasm_bindgen::JsCast trait，它提供了JS值与Rust类型之间的转换能力。

内容的提问来源于stack exchange，提问作者Nick Nizovtsev