https://github.com/axtk/proxy-element

A concise syntax for event delegation
https://github.com/axtk/proxy-element

event-delegation vanilla-js

Last synced: 26 days ago
JSON representation

A concise syntax for event delegation

• Host: GitHub
• URL: https://github.com/axtk/proxy-element
• Owner: axtk
• Created: 2020-12-14T02:37:02.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2020-12-19T01:06:27.000Z (about 4 years ago)
• Last Synced: 2024-12-25T23:51:33.374Z (about 2 months ago)
• Topics: event-delegation, vanilla-js
• Language: JavaScript
• Homepage:
• Size: 10.7 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
```js

import {proxySelector, proxySelectorAll} from 'proxy-element';

let container = document.querySelector('#container');

// delegating events from any existing and future elements

// within the container to the container itself:

proxySelector('h2', container).addEventListener('click', event => {

    console.log(event.target);

});

proxySelectorAll('.list-item', container).addEventListener('click', event => {

    console.log(event.target);

});

```

```js

// unspecified second argument: host element === document

let button = proxySelector('.header button');

let onButtonClick = () => console.log(button.query().textContent);

button.addEventListener('click', onButtonClick);

button.removeEventListener('click', onButtonClick);

```