html-element-event-listeners

Utility function to register multiple events

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

✨ Getting Started

with yarn

yarn add html-element-event-listeners

or

with npm

npm install html-element-event-listeners

💁 Usage

import { htmlElementEventListeners } from 'html-element-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 onEnd = (event) => console.log(`${event.type} event dispatched.`)

const { register, unRegister } = htmlElementEventListeners(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

htmlElementEventListeners(element, eventHandlers)

name	require	type	default	decstiption
element	✓	HTMLElement	-	MDN - EventTarget
eventHandlers	✓	object(HTMLElementEventHandlerType)	-	MDN - addEventListener

About 2nd argument(eventHandlers)

object - Key

Key is an event name. This must be strictly an event.type.

object - Value

Value must be array type.

[handler, listenerOptions]

Please follow this format. handler is required, listenerOptions is optional.

This is exactly the same as the format of the second and third arguments of addEventListener.

The second argument object 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