How to add an event listener to some HTML element from Rust which calls a trivial JS function?

I have the "on_event" JS function:

function on_event(event) {

And I have the "button" HTML element builder in Rust:

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")?;
// ...

How to link the "on_event" JS function with the "button" HTML element from the Rust code?

At the end I need something like:

button.add_event_listener("click", "on_event"); // <- What I need to use here instead of this code


  • For a trivial JS function I can use HTML attributes:

    button.set_attribute("onclick", "on_event('on_event callback fired!')")?;

    Also it can be used for Rust functions exported to JS with #[wasm_bindgen] and imported to the global namespace.

    In Rust:

    pub fn on_event(message: &str) {
    // ...
    button.set_attribute("onclick", "wasm.on_event('on_event callback fired!')")?;

    In JS:

    <script type="module">
      import init from './pkg/wasm_project.js';
      window.wasm = await init('./pkg/wasm_project_bg.wasm');

    If you are using Trunk then instead of edit of JS file you can create Trunk.toml file in the root of the project folder and put this code:

    pattern_script = "<script type=\"module\">import init, * as wasm from '{base}{js}';init('{base}{wasm}').then(()=>window.wasm=wasm);</script>"