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