Awesome Open Source
Awesome Open Source

Vanilla-delegation - npm version

Build Status David GitHub file size in bytes NPM

Light vanilla event delegation.

Extras


🔧 How to install

Install from npm and require it in your script.

$ npm install vanilla-delegation --save
require('vanilla-delegation');

or import the script in your html document:

<script rel="https://unpkg.com/vanilla-delegation/dist/vanilla-delegation.min.js" />

✏️ How to use

The script implements new methods on Element, NodeList and HTMLCollection.

// 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).
    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)
  • useCapture: [boolean] native useCapture parameter (default false). See here for more details.

➕ Add listener

// 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

// 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()

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
Alternatives To Vanilla Delegation
Select To Compare


Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,049,824
Performance (9,636
Listener (6,004
Remove (5,476
Vanilla Javascript (2,713
Vanilla Js (2,713
Polyfill (2,690
Delegation (693
Event Listener (551
Event Delegation (12
Delegated Events (7