Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rwu823/delegate-to
:arrow_heading_up: DOM Event delegate, it works great in React and Vue
https://github.com/rwu823/delegate-to
delegate delegated-events dom event
Last synced: 3 months ago
JSON representation
:arrow_heading_up: DOM Event delegate, it works great in React and Vue
- Host: GitHub
- URL: https://github.com/rwu823/delegate-to
- Owner: rwu823
- License: mit
- Created: 2016-06-20T07:57:57.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-12-15T20:35:32.000Z (about 1 year ago)
- Last Synced: 2024-10-11T17:43:10.953Z (4 months ago)
- Topics: delegate, delegated-events, dom, event
- Language: JavaScript
- Homepage:
- Size: 58.6 KB
- Stars: 31
- Watchers: 2
- Forks: 2
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.npmjs.org/package/delegate-to) [](https://travis-ci.org/rwu823/delegate-to/) [](https://coveralls.io/github/rwu823/delegate-to)
# delegate-to
DOM Event delegate, it works great in React, too
✅Clever API
✅Zero dependence
✅React Server-side rendering compatible
✅All browsers supported
## Compare with others
[zenorocha/delegate](https://github.com/zenorocha/delegate) is a popular library for delegate event:
```javascript
delegate(document.body, '.btn', 'click', function(e) {
console.log(e.delegateTarget)
}, false)
```
Works in React.js
```javascript
render () {
}
componentDidMount() {
delegate(this.refs.foo, '.btn', 'click', this.handleClick, false)
}
```
### Switch to `delegate-to`
```javascript
document.body.addEventListener('click', delegate('.btn', e => {
console.log(e.delegateTarget)
}), false)
```
Then in React.js
```javascript
render () {
}
```
You can see the advantage in `delegate-to`
- Fewer API interface (only 2 arguments)
- Works with normal `addEventListener`
- React(.jsx) friendly
- Flexibly, custom match condition
## Installation
```sh
$ npm i --save delegate-to
```
## Examples
```javascript
import delegate from 'delegate-to'
render () {
}
// custom match condition
render () {
target.classList.contains('btn'), this.handelClick)} />
}
```
## API
### delegate([selector || condition func], [dispatchEvent])
## Browsers Supported
`delegate-to` use native `el.matchs` DOM API to match `CSS selector`, it works on **IE 9+** and All morden browsers, you can try custom match condition function if you need to work with old browsers.