https://github.com/zenorocha/delegate
Lightweight event delegation
https://github.com/zenorocha/delegate
Last synced: about 1 year ago
JSON representation
Lightweight event delegation
- Host: GitHub
- URL: https://github.com/zenorocha/delegate
- Owner: zenorocha
- Created: 2015-10-25T23:00:29.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2022-12-06T18:19:22.000Z (over 3 years ago)
- Last Synced: 2025-04-01T03:34:20.477Z (about 1 year ago)
- Language: JavaScript
- Homepage: http://npmjs.com/delegate
- Size: 190 KB
- Stars: 184
- Watchers: 4
- Forks: 26
- Open Issues: 12
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
- fucking-awesome-micro-npm-packages - delegate - Lightweight event delegation. (Modules / Browser)
- awesome-micro-npm-packages-zh - delegate - 轻量级事件委派. (模块 / 浏览器)
- awesome-micro-npm-packages - delegate - Lightweight event delegation. (Modules / Browser)
- awesome-micro-npm-packages - delegate - Lightweight event delegation. (Modules / Browser)
README
# delegate
Lightweight event delegation.
## Install
You can get it on npm.
```
npm install delegate --save
```
If you're not into package management, just [download a ZIP](https://github.com/zenorocha/delegate/archive/master.zip) file.
## Setup
###### Node (Browserify)
```js
var delegate = require('delegate');
```
###### Browser (Standalone)
```html
```
## Usage
### Add event delegation
#### With the default base (`document`)
```js
delegate('.btn', 'click', function(e) {
console.log(e.delegateTarget);
}, false);
```
#### With an element as base
```js
delegate(document.body, '.btn', 'click', function(e) {
console.log(e.delegateTarget);
}, false);
```
#### With a selector (of existing elements) as base
```js
delegate('.container', '.btn', 'click', function(e) {
console.log(e.delegateTarget);
}, false);
```
#### With an array/array-like of elements as base
```js
delegate(document.querySelectorAll('.container'), '.btn', 'click', function(e) {
console.log(e.delegateTarget);
}, false);
```
### Remove event delegation
#### With a single base element (default or specified)
```js
var delegation = delegate(document.body, '.btn', 'click', function(e) {
console.log(e.delegateTarget);
}, false);
delegation.destroy();
```
#### With multiple elements (via selector or array)
Note: selectors are always treated as multiple elements, even if one or none are matched. `delegate()` will return an array.
```js
var delegations = delegate('.container', '.btn', 'click', function(e) {
console.log(e.delegateTarget);
}, false);
delegations.forEach(function (delegation) {
delegation.destroy();
});
```
## Browser Support
| 
| 
| 
| 
| 
| 
|
|:---:|:---:|:---:|:---:|:---:|:---:|
| Latest ✔ | Latest ✔ | Latest ✔ | 9+ ✔ | Latest ✔ | Latest ✔ |
## License
[MIT License](http://zenorocha.mit-license.org/) © Zeno Rocha