Easily manage DOM events
Easily manage DOM events.
This module uses Node.js-style modules, for best results use browserify.
var events = require'chi-events';var button = documentquerySelector'#myButton';// Listening for eventseventsbuttonon'click'// Handle the event;// Removing listenersvar listen = eventsbuttonon'click'listenremove;;// Listening for only one eventeventsbuttononce'click'// Only invoked once at most;// Triggering an event// Triggers the 'click' eventeventsbuttontrigger'click';// Use multiple DOM nodeseventsdocumentquerySelectorAll'a'on'click'epreventDefault;;// Use event delegation to listen for events on child nodeseventscontainerchildren'button' // Can use CSS selector or functionon'click'// `this` is the button element;
Creates a new wrapper object.
nodes can be any number of nodes or arrays of
nodes. Array can be infinitely nested. Also accepts psuedo-array objects, such
Adds an event listener to all the DOM nodes. Returns an object that contains a
remove function that will remove the event listener from all the nodes.
Adds an event listener to all the DOM nodes. The handler function will be only
called one time at most. The first time the event is triggered, the listener
will be removed. Return value is the same as
Creates an event with the event name
event and dispatches the event to all the
Returns a new object that can be used to listen to events that occur in the
children of the nodes. The returned object contains the
methods that have the same usage, but use event delegation to listen only for
events that occur in child nodes that match
filter can be a CSS
selector string or a function that takes a node and returns a truthy value if
events on that node should be handled.
The context (the
this object) in any attached event handlers will be the node
that the event bubbled from that matches
Note that since this listens for bubbled events, it will include child nodes that are added after the event listener has been attached.