Utility function to register multiple events
In other words, util function that multiple execute addEventListener/removeEventListener
with yarn
yarn add html-element-event-listeners
or
with npm
npm install html-element-event-listeners
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. 🔇
name | require | type | default | decstiption |
---|---|---|---|---|
element | ✓ | HTMLElement | - | MDN - EventTarget |
eventHandlers | ✓ | object(HTMLElementEventHandlerType) | - | MDN - addEventListener |
Key is an event name. This must be strictly an event.type.
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
.
{
touchstart: [onTouchStart, {capture: true, once: true}],
touchmove: [onTouchMove, { passive: false }],
touchend: [onEnd],
touchcancel: [onEnd]
}
register event listeners. In other words addEventListeners.
unRegister event listeners. In other words removeEventListeners.
with Jest.
yarn test
or
npm run test
Use SemVer for versioning. For the versions available, see the tags on this repository.
MIT © 1natsu172