README
Vanilla-delegation -
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 withremoveDelegateListener()
if needed. Be aware in case you're using a minifier like uglify-js be sure to setkeep_fnames: true
in youruglifyOptions
(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