Events

1linkconst count = state(0);

2link

3linkrenderer.render(

4link  <div onclick={() => count.set(count.get() + 1)}>

5link    You have clicked this {count} times!

6link  </div>

7link).on(document.body);

👉 The event object will be passed as the argument of given function.

👉 You can also pass callbags as event handlers, and the event object will be sent as data to the callbag:

1linkconst mouse = makeSubject();

2linkconst target = pipe(mouse, debounce(50));

3link

4linkrenderer.render(

5link  <div class='container' onmousemove={mouse}>

6link    <div class='ball' style={{

7link      transition: { 'transform.s': .5 },

8link      transform: expr($ => ({

9link        'translateX.px': $(target)?.clientX,

10link        'translateY.px': $(target)?.clientY,

11link      }))

12link    }}/>

13link  </div>

14link).on(document.body);