Is this the right way to add event on window object?

[1216892614]

Main Code

let window = window().unwrap();

let _ = EventListener::new(&window, "resize", |_| {
    log!("resize!");
});

log!(window);

What happend?

• window is log out.
• no "resize" log out after resize the page.

All Code for this.

use gloo::{console::log, events::EventListener};
use wasm_bindgen::{JsCast, JsValue};
use web_sys::{window, CanvasRenderingContext2d, HtmlCanvasElement};
use yew::prelude::*;

fn rander(interface: &CanvasRenderingContext2d, canvas: &HtmlCanvasElement) {
    interface.clear_rect(0.0, 0.0, canvas.width() as f64, canvas.height() as f64);
    interface.set_fill_style(&JsValue::from_str("#fe5c5a"));
    interface.set_font("100px sans-serif");
    interface.set_text_baseline("top");

    let text = "拽😂🤣TUVWXYZ0123456789";

    let text_metrics = interface.measure_text(text).unwrap();
    let (actual_bounding_box_descent, font_bounding_box_descent, width) = (
        text_metrics.actual_bounding_box_descent(),
        text_metrics.font_bounding_box_descent(),
        text_metrics.width(),
    );

    let text_pos = (100.0, 100.0);

    interface.fill_text(text, text_pos.0, text_pos.1).unwrap();
    interface.set_stroke_style(&JsValue::from_str("red"));
    interface.stroke_rect(text_pos.0, text_pos.1, width, actual_bounding_box_descent);

    interface.set_stroke_style(&JsValue::from_str("green"));
    interface.stroke_rect(text_pos.0, text_pos.1, width, font_bounding_box_descent)
}

#[function_component(SAKARA)]
pub fn sakara() -> Html {
    let node_ref = NodeRef::default();
    let is_first_rander = use_state(|| true);

    {
        let node_ref = node_ref.clone();

        use_effect(move || {
            if *is_first_rander {
                is_first_rander.set(false);

                //HERE !!!!!!!!!!!!!!!!!
                let window = window().unwrap();
                let _ = EventListener::new(&window, "resize", |_| {
                    log!("resize!");
                });
                log!(window);
            }

            let canvas = node_ref.cast::<HtmlCanvasElement>().unwrap();
            let interface: CanvasRenderingContext2d = canvas
                .get_context("2d")
                .unwrap()
                .unwrap()
                .dyn_into()
                .unwrap();
            rander(&interface, &canvas);

            || {}
        });
    }

    html! {
        <canvas
        style="width: 100%; height: 100%;"
        ref={node_ref}
        />
    }
}

fn main() {
    yew::start_app::<SAKARA>();
}

[1216892614]

Fixed!

Add .forget() at the tail of EventListener::new(...)