https://github.com/borracciablu/dh-addeventlistener

Helpers functions to facilitate event listener on DOM elements.
https://github.com/borracciablu/dh-addeventlistener

addeventlistener browser dom event javascript utility

Last synced: about 1 month ago
JSON representation

Helpers functions to facilitate event listener on DOM elements.

• Host: GitHub
• URL: https://github.com/borracciablu/dh-addeventlistener
• Owner: borracciaBlu
• License: bsd-3-clause
• Created: 2020-04-06T11:23:23.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2024-09-24T12:15:38.000Z (4 months ago)
• Last Synced: 2024-10-30T04:51:30.560Z (2 months ago)
• Topics: addeventlistener, browser, dom, event, javascript, utility
• Language: JavaScript
• Homepage:
• Size: 3.38 MB
• Stars: 2
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  

    

  

  


  

    Helpers functions to facilitate event listener on DOM elements.

  





    

    

    

    





	



## Installing

`npm install @borracciablu/dh-addeventlistener`

```js

import {onClick} from '@borracciablu/dh-addeventlistener';

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

```

## API Reference

### onClick(itmList, clbList)

```js

var itm = document.querySelectorAll('.btn');

var clb = [() => console.log('click')];

onClick(itm, clb);

 ```

### onFocus(itmList, clbList)

```js

var itm = document.querySelectorAll('.btn');

var clb = () => console.log('focus');

onFocus(itm, clb);

 ```

### onBlur(itmList, clbList)

```js

var itm = document.querySelectorAll('.btn');

var clb = () => console.log('blur');

onBlur(itm, clb);

```

### onKeyUp(itmList, clbList)

```js

var itm = document.querySelectorAll('.btn');

var clb = () => console.log('key up');

onKeyUp(itm, clb);

```

### onKeyDown(itmList, clbList)

```js

var itm = document.querySelectorAll('.btn');

var clb = () => console.log('key down');

onKeyDown(itm, clb);

```

### onChange(itmList, clbList)

```js

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.

```js

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](https://developer.mozilla.org/en-US/docs/Web/Events).

## CDN

Recommended CDN:

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

```js

var {onClick} = window.dhAddEventListener;

// Alternative syntax

var onClick = window.dhAddEventListener.onClick;

```