support event delegation

[yihuang]

Event delegation is to register a common event handler on a parent element to handle events for multiple child elements, because the event bubbles up, in javascript one can tell which child triggers the event from the event.target field.
Currently the event.target is not sent back to server side because it's a dom node, but we can try to sent back some information, like the component id c*** to server side where it can be mapped to a component.

Propose

1. Encode event target/currentTarget fields and pass to server side.
2. The object contains: { cid: "c***", tag: "", data: { ... } }, cid is the id of enclosing component, tag and data is information of the exact dom node, data is object of the data attributes on the dom node.

[yihuang]

related: #4606

It'll make it easier to customize(hacking) a complex component like the markdown, we can inject html snippets into the component, but handle the events on the component itself, it'll distinguish different children by some data attributes.

[evnchn]

1. Check if this is similar to what you want: Reactive card button that works despite great lag to server #4451, event emitted from child recursively find the parent element until stop, and do something about it.

2. Not about this feature idea but generally, I cannot in good faith recommend the customization (or hacking) of components. You are on your own if you land yourself an XSS attack vulnerability. If possible, it is better to do it "properly" by defining a custom NiceGUI element, than to monkey-patch an existing one.

[falkoschindler]

Thanks for the suggestion, @yihuang!

To clarify:

ui.button('A').on_click(lambda e: print(e.sender))
ui.button('B').on_click(lambda e: print(e.sender))

with ui.card().on('click', lambda e: print(e.sender)):
    ui.button('C')
    ui.button('D')

Clicking A or B yields information about which button was clicked. But clicking C or D only informs us that the card was clicked.

I'm not sure about the tag and data attributes. What exactly would they be useful for? And how would it help with #4606?

Maybe I'm confusing two things:

1. Sending target information like id, tag and data.
2. Using such information to reconstruct the target NiceGUI element as part of the event arguments.

Point 1 will work for any HTML elements, even nested ones inside ui.markdown.
Point 2 will only work for elements with a "c-ID".

[yihuang]

#4618
I made a pull request, there's a demo there.

[falkoschindler]

Its successor, PR #4689, will be part of the upcoming release of version 2.18.0.