Vanilla-delegation -
Light vanilla event delegation.
Extras
🔧 How to install
Install from npm and require it in your script.
$ npm install vanilla-delegation --save
;
or import the script in your html document:
✏️ How to use
The script implements new methods on Element
, NodeList
and HTMLCollection
.
// AddElementNodeListHTMLCollection // RemoveElement
- 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 elementconst body = document; // bind listener with delegationbody;
Also can be used with querySelectorAll
, getElementsByClassName
, getElementsByTagName
, getElementsByTagNameNS
// get multiple elementsconst div = document; // bind listener with delegation on every element in NodeList (or HTMLCollection)div;
➖ Remove listener
In order to remove a listener be sure to pass a named function to removeDelegateListener()
const div = document;div;
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