DEV Community

Discussion on: 70 : What is the point of Using Event Handler?

Collapse
pengeszikra profile image
Peter Vivo

You right, add / remove EventListener is a root of interaction handling.
Frameworks / libraries hide from us.
My favourite functional js library is callbag, which one is really useful at interaction handling, with stream of function.

import { pipe, fromEvent, forEach, take } from 'callbag-basics';
import { debounce } from 'callbag-debounce';

const button = document.querySelector("button");

// formEvent :: source: addEventListener
// debounce :: operator debounce click speed to 300ms
// take :: operator : after 50 click callbag end and that moment fromEvent final his job with removeEventListener
// forEach :: sink: console.log event

pipe(
  fromEvent(button, 'click'),   
  debounce(300),
  take(50),
  forEach(console.log)
)
Collapse
blanchloe profile image
Seonyoung Chloe (she/they) Author

Cool to know! Thanks!