https://github.com/matriz88/vanilla-delegation
Lightweight vanilla event delegation.
https://github.com/matriz88/vanilla-delegation
delegated-events delegation event event-delegation event-listener performance vanilla vanilla-javascript vanillajs
Last synced: about 2 months ago
JSON representation
Lightweight vanilla event delegation.
- Host: GitHub
- URL: https://github.com/matriz88/vanilla-delegation
- Owner: Matriz88
- License: mit
- Created: 2019-04-02T23:55:23.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T01:46:52.000Z (over 2 years ago)
- Last Synced: 2023-09-20T07:21:19.998Z (over 1 year ago)
- Topics: delegated-events, delegation, event, event-delegation, event-listener, performance, vanilla, vanilla-javascript, vanillajs
- Language: JavaScript
- Homepage:
- Size: 2.14 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vanilla-delegation - [](https://badge.fury.io/js/vanilla-delegation)
 [](https://travis-ci.org/Matriz88/vanilla-delegation)   
Light vanilla event delegation.
* [How to install](#-how-to-install)
* [How to use](#️-how-to-use)
* [Add listener](#-add-listener)
* [Remove listener](#-remove-listener)
* [Handler function details](#handler-function)
* [Global polyfill](#global-polyfill-ie9-support)
Extras
* [📚 How listener delegation works](/extras/how-delegation-lookup-works.md)
* [⚡ Performance tests](/extras/performance-test.md)
* [📄 Github pages](https://matriz88.github.io/vanilla-delegation/)
---
## 🔧 How to install
Install from npm and require it in your script.
```
$ npm install vanilla-delegation --save
```
```javascript
require('vanilla-delegation');
```
or import the script in your html document:
```html
```
## ✏️ How to use
The script implements new methods on `Element`, `NodeList` and `HTMLCollection`.
```javascript
// Add
Element.addDelegateListener(eventType, selector, handler, useCapture = false)
NodeList.addDelegateListener(eventType, selector, handler, useCapture = false)
HTMLCollection.addDelegateListener(eventType, selector, handler, useCapture = false)
// Remove
Element.removeDelegateListener(eventType, selector, handler, useCapture = false)
```
- **eventType**: [string] A case-sensitive string representing the event type to listen for.
- **selector**: [string] css child selector, must be a child of Element.
- **handler**: [function] callback function, original event obj is passed as argument ([more details here](#handler-function)).
Be sure to pass a named function so you can remove it with `removeDelegateListener()` if needed. Be aware in case you're using a minifier like uglify-js be sure to set `keep_fnames: true` in your `uglifyOptions` ([more details here](https://webpack.js.org/plugins/uglifyjs-webpack-plugin/#uglifyoptions))
- **useCapture**: [boolean] native useCapture parameter (default `false`). See [here](https://developer.mozilla.org/it/docs/Web/API/Element/addEventListener) for more details.
### ➕ Add listener
```javascript
// get single element
const body = document.querySelector('body');
// bind listener with delegation
body.addDelegateListener('click', 'a', function handlerFn(event) {
event.preventDefault();
alert('link clicked!');
});
```
Also can be used with `querySelectorAll`, `getElementsByClassName`, `getElementsByTagName`, `getElementsByTagNameNS`
```javascript
// get multiple elements
const div = document.querySelectorAll('div');
// bind listener with delegation on every element in NodeList (or HTMLCollection)
div.addDelegateListener('click', 'a', function handlerFn(event) {
event.preventDefault();
alert('link clicked!');
});
```
### ➖ Remove listener
In order to remove a listener be sure to pass a named function to `removeDelegateListener()`
```javascript
const div = document.querySelector('div');
div.removeDelegateListener('click', 'a', handlerFn);
```
`removeDelegateListener()` can be used on single Element nodes only
## Handler function
`Event` is passed to handler function as argument.
`this` is the element matching `selector`.
`event.delegateTarget` is the Element to which the event was originally attached (jQuery-like)
---
### Global polyfill (IE9+ support)
A global polyfill is included by default with vanilla-delegation:
See https://developer.mozilla.org/en-US/docs/Web/API/Element/matches#Polyfill
### Support
- (latest 2 versions)
- IE 11