事件委托

    fn new_event_listener(event_name: &str<u8, evt>, id: u32, bubbles: u8) {
        r#"
            const node = this.nodes[id];
            if(node.listening){node.listening += 1;}else{node.listening = 1;}
            node.setAttribute('data-dioxus-id', `\${id}`);
            this.createListener($event_name$, node, $bubbles$);
        "#
    }

  createListener(event_name: string, element: HTMLElement, bubbles: boolean) {
    if (event_name == "resize") {
      this.createResizeObserver(element);
    } else if (event_name == "visible") {
      this.createIntersectionObserver(element);
    }

    if (bubbles) {
      if (this.global[event_name] === undefined) {
        this.global[event_name] = { active: 1, callback: this.handler };
        this.root.addEventListener(event_name, this.handler);
      } else {
        this.global[event_name].active++;
      }
    } else {
      const id = element.getAttribute("data-dioxus-id");
      if (!this.local[id]) {
        this.local[id] = {};
      }
      element.addEventListener(event_name, this.handler);
    }
  }

    div { id: "outer", onclick: move |_| info!("#outer onclick"),
      button { id: "inner",
        onclick: move |e| {
          info!("#inner onclick -> stop_propagation");
          e.stop_propagation();
        },
        "inner"
      }
      span { id: "plain", "plain" }
    }
    input { id: "focusme", onfocus: move |_| info!("#focusme onfocus") }

--- where the listeners are ---
#main     listeners: click,mouseover,submit  data-dioxus-id=0
#outer    listeners: (none)  data-dioxus-id=8
#inner    listeners: (none)  data-dioxus-id=9
#focusme  listeners: focus  data-dioxus-id=10
#two      listeners: (none)  data-dioxus-id=17
#three    listeners: focus  data-dioxus-id=18
body      listeners: (none)  data-dioxus-id=null
interp.global: {"click":11,"submit":2,"mouseover":1}
interp.local: {"10":{},"18":{}}

        let handler: Closure<dyn Fn(&Event)> = Closure::wrap(Box::new({
            let runtime = runtime.clone();
            move |web_sys_event: &web_sys::Event| {
                let name = web_sys_event.type_();
                let element = walk_event_for_id(web_sys_event);
                let bubbles = web_sys_event.bubbles();

                let Some((element, target)) = element else {
                    return;
                };

                // Some browser features (e.g. datalist autocomplete) dispatch
                // a plain Event with a typed name like "keydown" that isn't
                // actually a KeyboardEvent. Drop events whose JS type doesn't
                // match what the converters will unchecked-cast to.
                if !event_type_matches(name.as_str(), web_sys_event) {
                    return;
                }

                let data = virtual_event_from_websys_event(web_sys_event.clone(), target);

                let event = dioxus_core::Event::new(Rc::new(data) as Rc<dyn Any>, bubbles);
                runtime.handle_event(name.as_str(), event.clone(), element);

                // Prevent the default action if the user set prevent default on the event
                let prevent_default = !event.default_action_enabled();
                if prevent_default {
                    web_sys_event.prevent_default();
                }
            }
        }));

fn walk_element_for_id(target: &Node) -> Option<(ElementId, web_sys::Element)> {
    let mut current_target_element = target.dyn_ref::<web_sys::Element>().cloned();

    loop {
        match (
            current_target_element
                .as_ref()
                .and_then(|el| el.get_attribute("data-dioxus-id").map(|f| f.parse())),
            current_target_element,
        ) {
            // This node is an element, and has a dioxus id, so we can stop walking
            (Some(Ok(id)), Some(target)) => return Some((ElementId(id), target)),

            // Walk the tree upwards until we actually find an event target
            (None, target_element) => {
                let parent = match target_element.as_ref() {
                    Some(el) => el.parent_element(),
                    // if this is the first node and not an element, we need to get the parent from the target node
                    None => target.parent_element(),
                };
                match parent {
                    Some(parent) => current_target_element = Some(parent),
                    _ => return None,
                }
            }

            // This node is an element with an invalid dioxus id, give up
            _ => return None,
        }
    }
}

struct GenericWebSysEvent {
    raw: Event,
    element: Element,
}

// todo: some of these events are being casted to the wrong event type.
// We need tests that simulate clicks/etc and make sure every event type works.
pub(crate) fn virtual_event_from_websys_event(
    event: web_sys::Event,
    target: Element,
) -> PlatformEventData {
    PlatformEventData::new(Box::new(GenericWebSysEvent {
        raw: event,
        element: target,
    }))
}

        $(
            impl From<&PlatformEventData> for $data {
                fn from(val: &PlatformEventData) -> Self {
                    with_event_converter(|c| c.$converter(val))
                }
            }
        )*

            convert_form_data(FormData) => web_sys::Event => |event| {
                let event = downcast_event(event);
                FormData::new(WebFormData::new(event.element.clone(), event.raw.clone()))
            };
            // ...
            convert_mouse_data(MouseData) => web_sys::MouseEvent;

    a { id: "pa", href: "#a",
      onclick: move |e: MouseEvent| async move {
        e.prevent_default();
        YieldOnce(false).await;
        info!("#pa prevent_default before await");
      },
      "A"
    }
    a { id: "pb", href: "#b",
      onclick: move |e: MouseEvent| async move {
        YieldOnce(false).await;
        e.prevent_default();
        info!("#pb prevent_default after await");
      },
      "B"
    }

--- prevent_default before / after await (links) ---
#pa: dispatchEvent returned false, defaultPrevented=true, hash right after: ""
[console.log] INFO src/main.rs:66 #pa prevent_default before await
#pa: location.hash after 200ms: ""
#pb: dispatchEvent returned true, defaultPrevented=false, hash right after: "#b"
[navigatedWithinDocument] /#b
[console.log] INFO src/main.rs:74 #pb prevent_default after await
#pb: location.hash after 200ms: "#b"

    form { id: "f1", onsubmit: move |_| info!("#f1 onsubmit (no prevent_default)"),
      input { name: "q", value: "one" }
      button { id: "s1", r#type: "submit", "submit 1" }
    }
    form { id: "f2",
      onsubmit: move |e| {
        e.prevent_default();
        info!("#f2 onsubmit prevent_default, values = {:?}", e.values());
      },
      input { name: "q", value: "two" }
      button { id: "s2", r#type: "submit", "submit 2" }
    }

--- form submit without / with prevent_default ---
[console.log] INFO src/main.rs:85 #f2 onsubmit prevent_default, values = [("q", Text("two"))]
#f2: marker = "still the same document" url = /
[console.log] INFO src/main.rs:78 #f1 onsubmit (no prevent_default)
[navigated] /?q=one
[navigatedWithinDocument] /?q=one
#f1: marker = undefined url = /?q=one

--- stop_propagation vs a native listener on document ---
[console.log] INFO src/main.rs:54 #inner onclick -> stop_propagation
[console.log] native document listener: click on #inner, eventPhase=3
(click on the span without listener)
[console.log] INFO src/main.rs:51 #outer onclick
[console.log] native document listener: click on #plain, eventPhase=3

fn app() -> Element {
  let extra: Vec<Attribute> = if EXTRA.load(Ordering::SeqCst) {
    vec![dioxus::html::events::onmouseover(|_| {})]
  } else {
    vec![]
  };
  rsx! {
    div { id: "two", onclick: |_| {}, ..extra, "two" }
  }
}

-- rebuild
LoadTemplate { index: 0, id: ElementId(1) }
NewEventListener { name: "click", id: ElementId(1) }
NewEventListener { name: "mouseover", id: ElementId(1) }
AppendChildren { id: ElementId(0), m: 1 }
-- after dropping onmouseover
RemoveEventListener { name: "mouseover", id: ElementId(1) }

    fn remove_event_listener(event_name: &str<u8, evt>, id: u32, bubbles: u8) {
        "{let node = this.nodes[$id$]; node.listening -= 1; node.removeAttribute('data-dioxus-id'); this.removeListener(node, $event_name$, $bubbles$);}"
    }

  let extra_bubbling: Vec<Attribute> = if two_extra() {
    vec![dioxus::html::events::onmouseover(move |_| info!("#two onmouseover"))]
  } else {
    vec![]
  };
  let extra_non_bubbling: Vec<Attribute> = if three_extra() {
    vec![dioxus::html::events::onfocus(move |_| info!("#three onfocus"))]
  } else {
    vec![]
  };
  // ...
    button { id: "toggle2", onclick: move |_| two_extra.toggle(), "toggle #two" }
    button { id: "toggle3", onclick: move |_| three_extra.toggle(), "toggle #three" }
    div { id: "two", onclick: move |_| info!("#two onclick"), ..extra_bubbling, "two" }
    input { id: "three", onclick: move |_| info!("#three onclick"), ..extra_non_bubbling }

--- removing one of two listeners on the same element (bubbling: mouseover) ---
[console.log] INFO src/main.rs:92 #two onclick
[console.log] INFO src/main.rs:31 #two onmouseover
before: #two data-dioxus-id = 17  listening = 2  global.mouseover = 1
after toggle2: #two data-dioxus-id = null  listening = 1  global.mouseover = undefined
(clicked #two after toggle2)
app still renders? #counter = count = 1
--- removing a non-bubbling listener (focus) ---
[console.log] INFO src/main.rs:93 #three onclick
before: #three data-dioxus-id = 18  listeners: focus  local = {"10":{},"18":{}}
[exception] TypeError: Cannot convert undefined or null to object
after toggle3: #three data-dioxus-id = null  listeners: focus
[console.log] INFO src/main.rs:51 #outer onclick
(clicked #outer: its handler still runs synchronously)
after two clicks on #inc: #counter = count = 0

--- a native stopPropagation below the root ---
[console.log] native #outer listener: stopPropagation