1natsu172 / register-event-listeners

Utility function to register multiple event listeners

register-event-listeners

Utility function to register multiple event listeners

In other words, utility function that multiple execute addEventListener/removeEventListener

---

✨ Getting Started

with yarn

yarn add register-event-listeners

or

with npm

npm install register-event-listeners

💁 Usage

import { registerEventListeners } from 'register-event-listeners'

const eventTarget = document.body

const onTouchStart = (event) => console.log(`${event.type} event dispatched.`)
const onTouchMove = (event) => console.log(`${event.type} event dispatched.`)
const onEnd = (event) => console.log(`${event.type} event dispatched.`)

const { register, unRegister } = registerEventListeners(eventTarget, [
  ['touchstart', onTouchStart],
  ['touchmove', onTouchMove, { passive: false }],
  ['touchend', onEnd],
  ['touchcancel', onEnd]
])

// Execute element.addEventListener(s) passed to the argument.
register()

// Now added event listeners. 🔈

// Execute element.removeEventListener(s) passed to the argument.
unRegister()

// Now removed event listeners. 🔇

🔥 APIs

registerEventListeners(element, listeners)

name	require	type	default	decstiption
eventTarget	✓	EventTarget	-	MDN - EventTarget
listeners	✓	Array(EventListeners)	-	MDN - addEventListener

About the 2nd argument(listeners)

The element of the array

Element is same as the format of the argument of addEventListener

That is this 👉 [type, listener[, options])]

• type is event.type.
• listener is commonly called a handler
• options is listenerOptions

The 2nd argument should be like this.

[
  ['touchstart', onTouchStart, {capture: true, once: true}],
  ['touchmove', onTouchMove, { passive: false }],
  ['touchend', onEnd],
  ['touchcancel', onEnd]
]

Returns

register

register event listeners. In other words addEventListeners.

unRegister

unRegister event listeners. In other words removeEventListeners.

💚 Running the tests

with Jest.

yarn test

or

npm run test

🏷 Versioning

Use SemVer for versioning. For the versions available, see the tags on this repository.

©️ License

MIT © 1natsu172

register-event-listeners's Issues

2nd argument type(EventListeners) is broken.

Want to provide the types that each different tuple-type elements in array…but there are many bugs ??

• not infer 2nd element(handler)'s EventType
  • TS side bug? or Wrong my definition?
• 3rd element(ListenerOptions), object key completion becomes invalid after the second time select
  • maybe TS side bug.

¯\_(ツ)_/¯