register-event-listeners

Utility function to register multiple event listeners

Usage no npm install needed!

<script type="module">
  import registerEventListeners from 'https://cdn.skypack.dev/register-event-listeners';
</script>

README

Codecov

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