Helpers functions to facilitate event listener on DOM elements.

Installing

npm install @borracciablu/dh-addeventlistener

import {onClick} from '@borracciablu/dh-addeventlistener';
var {onClick, onFocus, onBlur, onKeyDown, onKeyUp, generateEventFn} = require('@borracciablu/dh-addeventlistener');

API Reference

onClick(itmList, clbList)

var itm = document.querySelectorAll('.btn');
var clb = [() => console.log('click')];
onClick(itm, clb);

onFocus(itmList, clbList)

var itm = document.querySelectorAll('.btn');
var clb = () => console.log('focus');
onFocus(itm, clb);

onBlur(itmList, clbList)

var itm = document.querySelectorAll('.btn');
var clb = () => console.log('blur');
onBlur(itm, clb);

onKeyUp(itmList, clbList)

var itm = document.querySelectorAll('.btn');
var clb = () => console.log('key up');
onKeyUp(itm, clb);

onKeyDown(itmList, clbList)

var itm = document.querySelectorAll('.btn');
var clb = () => console.log('key down');
onKeyDown(itm, clb);

onChange(itmList, clbList)

var itm = document.querySelectorAll('.select');
var clb = () => console.log('change');
onChange(itm, clb);

generateEventFn(eventType)

In case you need an event not covered in the current api.

var onMouseEnter = generateEventFn('mouseenter');
var itm = document.querySelectorAll('.btn');
var clb = () => console.log('key down');
onMouseEnter(itm, clb);

For the full list of eventTypes see Event reference.

CDN

Recommended CDN:

https://unpkg.com/@borracciablu/dh-addeventlistener@latest/dist/dh-addeventlistener.min.js

var {onClick} = window.dhAddEventListener;

// Alternative syntax
var onClick = window.dhAddEventListener.onClick;