A tiny (700 byte minified and gzipped) event delegation helper library.
Events lets you setup individual event listeners throughout your code, but runs them all in a single event listener behind-the-scenes. Learn more about why you should use event delegation.
Installation | API | Selectors | Browser Compatibility | License
Vanilla JS Pocket Guides or join the Vanilla JS Academy and level-up as a web developer. 🚀
Want to learn how to write your own vanilla JS plugins? Check out myInstallation
Compiled and production-ready code can be found in the dist
directory. The src
directory contains development code.
There are two versions of Events: the standalone version, and one that comes preloaded with a polyfill for closest()
, which is only supported in newer browsers.
If you're including your own polyfills or don't want to enable this feature for older browsers, use the standalone version. Otherwise, use the version with polyfills.
Direct Download
You can download the files directly from GitHub.
CDN
You can also use the jsDelivr CDN. I recommend linking to a specific version number or version range to prevent major updates from breaking your site. Smooth Scroll uses semantic versioning.
<!-- Always get the latest version --><!-- Not recommended for production sites! --> <!-- Get minor updates and patch fixes within a major version --> <!-- Get patch fixes within a minor version --> <!-- Get a specific version -->
NPM
You can also use NPM (or your favorite package manager).
npm install eventslibjs
API
on()
Add an event listener.
/** * Add an event * @param * @param * @param */events;
Example
events;
You can attach the same callback to multiple event types or selectors by separating them with a comma.
// Attach to multiple eventsevents; // Attach to multiple selectorsevents;
off()
Remove an event listener. All three arguments must be identical to the ones used when setting up the listener.
/** * Remove an event * @param * @param * @param */events;
Example
events;
You can also remove all events of a particular type by passing in just the event type.
// Remove all click eventsevents;
once()
Run an event callback exactly once and then automatically remove it. Works the same as the on()
method.
/** * Add an event, and automatically remove it after it's first run * @param * @param * @param */events;
Example
events;
get()
Get an immutable list of all active event listeners.
Returns an object. Each active event type is a key, with an array of selector/callback objects as its property.
var activeEvents = events;
Selectors
You can pass in any valid CSS selector (or combination of selectors). Events uses closest()
under-the-hood to check if the element that triggered the event matches the selector (or is inside an element that does).
// ID as a selectorevents; // Data attribute selectorevents; // Multiple selectorsevents;
To run your callback on any element, pass in *
for a selector.
events;
You can also pass in a node instead of a selector string.
var sandwich = document;events;
Browser Compatibility
Events works in all modern browsers, and IE 9 and above.
Polyfills
Support back to IE9 requires a polyfill for the closest()
method. Use the included polyfills version of Events, or include your own.
License
The code is available under the MIT License.