Events
Event Delegation
Event delegation is an old optimization technique and there are many good explanations of this technique.
Kivi provides several methods that can help writing delegated event handlers.
Component descriptor method createDelegatedEventHandler
returns a function that can be used as an event handler.
First parameter is a selector that will be used to match the target
element. Second parameter is a selector for a
component's root element, it can be a string or a boolean value, if it is a boolean value and it is true
then
matching target will be used as a root element, if it is false
then currentTarget
element will be used as a root.
Third parameter is an event handler that receives event, component, props and state params.
const ClickableComponent = new ComponentDescriptor<string, void>()
.update((c, text) => {
c.sync(c.createVRoot().className("clickable").children(text));
});
const onClick = ClickableComponent.createDelegatedEventHandler(".clickable", true, (e, c, text) => {
e.stopPropagation();
console.log(`Clicked on ${text}`);
});
const Container = new ComponentDescriptor<string[], void>()
.attached((c) => {
c.element.onclick = onClick;
})
.update((c, items) => {
c.sync(c.createVRoot()
.children(items.map((i) => ClickableComonent.createVNode(i))));
})