# es6-delegate

> Delegate function built with ES6

Latest version **1.2.0** (published 2018-11-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install es6-delegate
pnpm add es6-delegate
yarn add es6-delegate
bun add es6-delegate
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2018-11-09 |
| First published | 2018-04-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 15.2 KB |
| Known vulnerabilities | 0 (+2 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Michael Bunting |
| Maintainers | mbunting |
| Keywords | es6, delegate, es6 delegate, event delegation |

## Links

- npm: https://www.npmjs.com/package/es6-delegate
- Repository: https://github.com/MichaelBunting/es6-delegate
- npm.io page: https://npm.io/package/es6-delegate

## Dependencies (2)

- [rollup](https://npm.io/package/rollup.md) ^0.58.2
- [element-closest](https://npm.io/package/element-closest.md) ^2.0.2

## Alternatives

- [async-exit-hook](https://npm.io/package/async-exit-hook.md) — 3.7M weekly downloads
- [evnty](https://npm.io/package/evnty.md) — 7.2K weekly downloads
- [eleventy-plugin-asciidoc](https://npm.io/package/eleventy-plugin-asciidoc.md) — 3.5K weekly downloads
- [@jswork/next-get2get](https://npm.io/package/@jswork/next-get2get.md) — 945 weekly downloads
- [@dashersw/axon](https://npm.io/package/@dashersw/axon.md) — 934 weekly downloads

## Recent versions

- 1.2.0 (latest) — 2018-11-09
- 1.1.5 — 2018-06-01
- 1.1.4 — 2018-06-01
- 1.1.3 — 2018-05-25
- 1.1.2 — 2018-05-25
- 1.1.1 — 2018-05-04
- 1.1.0 — 2018-05-03
- 1.0.0 — 2018-04-30

## README

# ES6 Delegate

Simple, flexible function used for delegating events in JavaScript.

## Installation
Install with npm/yarn:

```
yarn add es6-delegate
```

Then import into a javascript file you want to use it in:

```js
import delegate from 'es6-delegate';
```

## Preface
This plugin is built using ES6, transpiled into es6 export, and doesnt include any polyfills out of the box. If you plan to support legacy browsers, you'll need to add the appropriate polyfills.

## Usage
ES6 delegate has 4 parameters that work around what you pass to it. The 4 parameters are:

* `elements {String|Node|NodeList}` - String, Node, or NodeList to bind the actual event to
    * e.g. `'.container'`, `document`, `document.querySelectorAll('.form')`
* `eventListeners {String}` - Space separated list of events
    * e.g. `'click'`, `'click focus'`
* `selector {String|Node|NodeList}` - String, Node, or NodeList used to determine if the event should be triggered
    * e.g. `'.btn'`, `document.getElementById('btn1')`, `document.querySelectorAll('.btn')`
* `callback {Function}` - Function called when event is triggered
    * e.g `(event, element) => { console.log(event, element) }`

### Defaulting element to `document`
```js
delegate('click', '.btn', (e, ele) => {
    // Event object
    const eventObj = e;
    // Element that triggered event - '.btn'
    const targetElement = ele;
    // Array of Elements that event is bound to - [document]
    const boundElement = e.relatedElements;
});
```

### Passing string as element
```js
delegate('.container', 'click', '.btn', (e, ele) => {
    // ele is NodeList of '.btn'
    // e.relatedElements is Array of '.container' elements
});
```

### Passing node as element
```js
const body = document.body;
delegate(body, 'click', '.btn', (e, ele) => {
    // e.relatedElements is Array of 'body' elements
});
```

### Passing nodelist as element
```js
const forms = document.querySelectorAll('.form');
delegate(forms, 'click', '.btn', (e, ele) => {
    // e.relatedElements is array of forms
});
```

### Passing multiple events
```js
delegate('click focus', '.btn', () => {
    // Function will fire when a '.btn' is clicked or focused
});
```

### Passing string as selector
```js
delegate('click', '.btn', (e, ele) => {
    // ele will be the '.btn' that was clicked
});
```

### Passing node as selector
```js
const btn1 = document.getElementById('btn1');
delegate('click', btn1, (e, ele) => {
    // ele is btn1
});
```

### Passing nodelist as selector
```js
const allBtns = document.querySelectorAll('.btn');
delegate('click', allBtns, (e, ele) => {
    // ele is button clicked from allBtns
});
```

## Unbinding Events
The delegate function returns the method it bound the event with for ease of use when unbinding events.

```js
// Bind method
const method = delegate('click', '.btn', (e, ele) => {});

// Unbind method
document.removeEventListener('click', method, true);
```

---
_Source: https://npm.io/package/es6-delegate · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._