Multi-touch, gestures, and other events—click, dblclick, dbltap, tap, longpress, drag, swipe, pinch, rotate, shake. For pointer events, each listener can handle anywhere from 1 to 12 fingers at a time, or more, depending on the device. Includes MetaKey tracking (CMD, CTRL) to support native key-commands in various platforms.
// Retains "this" attribute as target, and overrides native addEventListener.
target.addEventListener(type, listener, useCapture);
target.removeEventListener(type, listener, useCapture);
// Has less function calls then the override version, while retains similar formatting.
Event.add(target, type, listener, configure);
Event.remove(target, type, listener, configure);
// Same as the previous, but (arguably) cleaner looking code.
Event.add(configure);
Event.remove(configure);
// adding with addEventListener()
target.addEventListener("swipe", function(event) {
console.log(event.velocity, event.angle, event.fingers);
}, {
fingers: 2, // listen for specifically two fingers (minFingers & maxFingers both now equal 3)
snap: 90 // snap to 90 degree intervals.
});
// adding with Event.add() - a bit more efficient
Event.add(target, "swipe", function(event, self) {
console.log(self.velocity, self.angle, self.fingers);
}, {
fingers: 2,
snap: 90
});
// adding with Event.add() w/ configuration
Event.add({
target: target,
type: "swipe",
fingers: 2,
snap: 90,
listener: function(event, self) {
console.log(self.velocity, self.angle, self.fingers);
}
});
Multiple listeners glued together.
// adding with addEventListener()
target.addEventListener("click swipe", function(event) { });
// adding with Event.add()
Event.add(target, "click swipe", function(event, self) { });
Query selectors to create an event (querySelectorAll)
// adding events to NodeList from querySelectorAll()
document.querySelectorAll("#element a.link").addEventListener("click", callback);
// adding with Event.add()
Event.add("#element a.link", "click", callback);
Listen until selector to become available (querySelector)
Event.add("body", "ready", callback);
// or...
Event.add({
target: "body",
type: "ready",
timeout: 10000, // set a timeout to stop checking.
interval: 30, // set how often to check for element.
listener: callback
});
Multiple listeners bound to one listener w/ configuration.
var bindings = Event.add({
target: target,
type: "click swipe",
snap: 90, // snap to 90 degree intervals.
minFingers: 2, // minimum required fingers to start event.
maxFingers: 4, // maximum fingers in one event.
listener: function(event, self) {
console.log(self.gesture); // will be click or swipe.
console.log(self.x);
console.log(self.y);
console.log(self.identifier);
console.log(self.start);
console.log(self.fingers); // somewhere between "2" and "4".
self.pause(); // disable event.
self.resume(); // enable event.
self.remove(); // remove event.
}
});
Multiple listeners bound to multiple callbacks w/ configuration.
var bindings = Event.add({
target: target,
minFingers: 1,
maxFingers: 12,
listeners: {
click: function(event, self) {
self.remove(); // removes this click listener.
},
swipe: function(event, self) {
binding.remove(); // removes both the click + swipe listeners.
}
}
});
Multiple listeners bound to multiple callbacks w/ multiple configurations.
// NOTE: These two features are on by default (so it's easy to add to a project)
// however, I like to run without modify* support in production, as it's less hacky.
// ----------------------------------------------------
// add custom *EventListener commands to HTMLElements.
Event.modifyEventListener = true;
// add bulk *EventListener commands on NodeLists from querySelectorAll and others.
Event.modifySelectors = true;
Quirks + Workarounds
* When using other libraries that have built in "Event" namespace (TypeScript),
to prevent conflict use "eventjs" instead.