Event.js : 1.1.1 : 2013/04/06 : MIT License

https://github.com/mudcube/Event.js

1  : click, dblclick, dbltap
1+ : tap, longpress, drag, swipe
2+ : pinch, rotate
   : mousewheel, devicemotion, shake

• Three ways to add/remove events (and why)

---

// 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);

• Click :: fingers, minFingers, maxFingers

---

Event.add(window, "click", function(event, self) {
	console.log(self.gesture, self.x, self.y);
});

• Double-Click :: fingers, minFingers, maxFingers

---

Event.add(window, "dblclick", function(event, self) {
	console.log(self.gesture, self.x, self.y);
});

• Drag :: fingers, maxFingers, position

---

Event.add(window, "drag", function(event, self) {
	console.log(self.gesture, self.fingers, self.state, self.start, self.x, self.y, self.bbox);
});

• Gesture :: fingers, minFingers, maxFingers

---

Event.add(window, "gesture", function(event, self) {
	console.log(self.gesture, self.fingers, self.state, self.rotation, self.scale);
});

• Swipe :: fingers, minFingers, maxFingers, snap, threshold

---

Event.add(window, "swipe", function(event, self) {
	console.log(self.gesture, self.fingers, self.velocity, self.angle, self.start, self.x, self.y);
});

• Tap :: fingers, minFingers, maxFingers, timeout

---

Event.add(window, "tap", function(event, self) {
	console.log(self.gesture, self.fingers);
});

• Longpress :: fingers, minFingers, maxFingers, delay

---

Event.add(window, "longpress", function(event, self) {
	console.log(self.gesture, self.fingers);
});

• Shake

---

Event.add(window, "shake", function(event, self) {
	console.log(self.gesture, self.acceleration, self.accelerationIncludingGravity);
});

• DeviceMotion (smooth quirks)

---

Event.add(window, "devicemotion", function(event, self) {
	console.log(self.gesture, self.acceleration, self.accelerationIncludingGravity);
});

• Wheel (smooth quirks)

---

Event.add(window, "wheel", function(event, self) {
	console.log(self.gesture, self.state, self.wheelDelta);
});

• Single listener with a custom configuration.

---

// 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.

---

var binding = Event.add({
	target: target,
	listeners: {
		longpress: {
			fingers: 1,
			wait: 500, // milliseconds
			listener: function(event, self) {
				console.log(self.fingers); // "1" finger.
			}
		},
		drag: {
			fingers: 3,
			position: "relative", // "relative", "absolute", "difference", "move"
			listener: function(event, self) {
				console.log(self.fingers); // "3" fingers.
				console.log(self.x); // coordinate is relative to edge of target.
			}
		}
	}
});

• Capturing an event and manually forwarding it to a proxy (tiered events).

---

Event.add(target, "down", function(event, self) {
	var x = event.pageX; // local variables that wont change.
	var y = event.pageY;
	Event.proxy.drag({
		event: event,
		target: target,
		listener: function(event, self) {
			console.log(x - event.pageX); // measure movement.
			console.log(y - event.pageY);
		}
	});
});

• Stop, prevent and cancel.

---

Event.stop(event); // stop bubble.
Event.prevent(event); // prevent default.
Event.cancel(event); // stop and prevent.

• Track for proper command/control-key for Mac/PC.

---

Event.add(window, "keyup keydown", Event.proxy.metaTracker); // setup tracking on the metaKey.
Event.add(window, "focus load blur beforeunload", Event.proxy.metaTrackerReset); // 
console.log(Event.proxy.metaTracker(event)); // returns whether metaKey is pressed.
console.log(Event.proxy.metaKey); // indicates whether metaKey is pressed (once metaTracker is run).

• Test for event features, in this example Drag & Drop file support.

---

console.log(Event.supports('dragstart') && Event.supports('drop') && !!window.FileReader);

• Turn prototyping on/off

---

// 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.