├── delegate.js
├── demo.html
├── package.json
└── README.md
/delegate.js:
--------------------------------------------------------------------------------
1 | window.Rd = window.Rd || {}
2 |
3 | window.Rd.delegateEvent = function (delegateNode, eventType, selector, listener) {
4 | delegateNode.addEventListener(eventType, function (event) {
5 | var match = event.target.closest(selector)
6 | if (match) { listener.call(match, event) }
7 | })
8 | }
9 |
--------------------------------------------------------------------------------
/demo.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Delegate Neat Demo
4 |
5 |
6 |
7 |
8 |
9 |
10 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@readable/delegate",
3 | "version": "0.0.5",
4 | "description": "Simple and readable vanilla js event delegation",
5 | "keywords": [
6 | "delegate",
7 | "fast",
8 | "light",
9 | "lightweight",
10 | "minimalist",
11 | "simple",
12 | "vanilla"
13 | ],
14 | "author": "Oleg",
15 | "license": "MIT",
16 | "repository": {
17 | "type": "git",
18 | "url": "https://github.com/readable/delegate.git"
19 | },
20 | "main": "delegate.js",
21 | "scripts": {
22 | "lint": "standard delegate.js README.md",
23 | "preversion": "npm run lint"
24 | },
25 | "dependencies": {
26 | "@readable/closest": "0.0.2"
27 | },
28 | "devDependencies": {
29 | "eslint-plugin-markdown": "^1.0.0-beta.6",
30 | "standard": "^11.0.1"
31 | },
32 | "standard": {
33 | "envs": [
34 | "browser"
35 | ],
36 | "globals": [
37 | "Rd"
38 | ],
39 | "plugins": [
40 | "markdown"
41 | ]
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Delegate
2 |
3 | 
4 | 
5 | 
6 | 
7 | 
8 |
9 | [](https://standardjs.com)
10 |
11 | Simple and fast **vanilla js** event delegation. Uses [`Element.closest`](https://developer.mozilla.org/en-US/docs/Web/API/Element/closest) and falls back on [@readable/closest](https://www.npmjs.com/package/@readable/closest) fast polyfill. In case better browser support is needed, use slower and more primitive `Element.closest` polyfill.
12 |
13 | `Element.closest` polyfill is required **only** for **IE**, other reasonably up to date browsers are fine without it.
14 |
15 | ## Install
16 |
17 | ``` sh
18 | npm install --save @readable/delegate
19 | ```
20 |
21 | ``` html
22 |
23 |
24 | ```
25 | ## Example
26 |
27 | ```js
28 | Rd.delegateEvent(document, 'click', '#counter', function (event) {
29 | this.innerText += 1
30 | })
31 | ```
32 |
33 | ``` html
34 |
35 | ```
36 |
--------------------------------------------------------------------------------