delegated

A tiny little cross-browser event delegation library. Uses Element.matches for CSS selector-based filtering.

Example

var parent = document.querySelector(".parent-of-many-nodes");
 
parent.addEventListener("click", delegated(".filter", function(<event>, <element>) {
    // event is the raw DOM event
    // element is the nearest element matching the filter string
}));
 
parent.addEventListener("click", delegated({
    ".filter" : function(<event>, <element>) {
        ...
    },
    ".filter2" : function(<event>, <element>) {
        ...
    }
}));
 

Example using Mithril

m(".parent-of-many-nodes", {
        onclick: delegated(".filter", function(e, el) {
            // el is the nearest element with a class of "filter" to the source event
        })
    },
    ...
);
 
m(".parent-of-many-nodes", {
        onclick: delegated({
            ".filter" : function(e, el) {
                ...
            },
            ".filter2" : function(e, el) {
                ...
            }
        })
    },
    ...
);

API

All calls to delegated(...) return an event handling function that will check nodes up to the parent to see if they match specified filter(s).

delegated(<string>, <function>) - Single string filter & callback function.

delegated(<object>) - Each property of the object is used as the filter, and the value of the property should be the callback function.