delegate

What is delegate?

The 'delegate' npm package is designed to provide a straightforward and efficient way to manage and delegate event handlers in JavaScript. It allows developers to attach a single event listener to a parent element that can handle events from child elements, matching a specific selector. This approach is particularly useful for handling events on dynamically added elements or for reducing the number of event listeners in an application, thereby improving performance.

What are delegate's main functionalities?

Event delegation

This feature allows you to attach an event listener to a parent element (in this case, a 'ul' with id 'myList') that listens for clicks on its child 'li' elements. When a 'li' element is clicked, the provided function is executed. This is useful for handling events on elements that may not exist at the time the script runs or for minimizing the number of event listeners in your application.

document.delegate('ul#myList', 'click', 'li', function(event) {
  console.log('List item clicked:', this);
});

Other packages similar to delegate

dom-delegate

Similar to 'delegate', 'dom-delegate' offers event delegation functionalities, allowing events to be bound to a parent element and triggered by child elements. The main difference lies in the API and additional features that 'dom-delegate' might offer, such as more advanced event filtering or handling capabilities.

event-delegate

This package provides functionality similar to 'delegate' by enabling event delegation in JavaScript applications. It allows for a more modular and efficient way to handle events, especially in dynamic content scenarios. The comparison mainly revolves around the specific API design and performance optimizations each package might offer.

README

delegate

Lightweight event delegation.

Install

You can get it on npm.

npm install delegate --save

If you're not into package management, just download a ZIP file.

Setup

Node (Browserify)

var delegate = require('delegate');

Browser (Standalone)

<script src="dist/delegate.js"></script>

Usage

Add event delegation

With the default base (document)

delegate('.btn', 'click', function(e) {
    console.log(e.delegateTarget);
}, false);

With an element as base

delegate(document.body, '.btn', 'click', function(e) {
    console.log(e.delegateTarget);
}, false);

With a selector (of existing elements) as base

delegate('.container', '.btn', 'click', function(e) {
    console.log(e.delegateTarget);
}, false);

With an array/array-like of elements as base

delegate(document.querySelectorAll('.container'), '.btn', 'click', function(e) {
    console.log(e.delegateTarget);
}, false);

Remove event delegation

With a single base element (default or specified)

var delegation = delegate(document.body, '.btn', 'click', function(e) {
    console.log(e.delegateTarget);
}, false);

delegation.destroy();

With multiple elements (via selector or array)

Note: selectors are always treated as multiple elements, even if one or none are matched. delegate() will return an array.

var delegations = delegate('.container', '.btn', 'click', function(e) {
    console.log(e.delegateTarget);
}, false);

delegations.forEach(function (delegation) {
    delegation.destroy();
});

Browser Support

Latest ✔	Latest ✔	Latest ✔	9+ ✔	Latest ✔	Latest ✔

License

MIT License © Zeno Rocha