EventObserver

EventObserver is a way to handle DOM events like Promises.

document.on("keydown").then(function (event) {
	// log every key code
	console.log(event.keyCode);
});

Event manipulation is as easy as working with arrays.

document.on("keydown").map(function (event) {
	// only care about the key
	return event.keyCode;
}).filter(function (keyCode) {
	// only care when the key is between 50 and 100
	return keyCode >= 50 && keyCode <= 100;
}).then(function (keyCode) {
	// log every code
	console.log(keyCode);
});

To see EventObserver in action, visit the live demo.

Constructor

EventObserver

Returns a newly instantiated event observer.

EventObserver(
	Node target,
	String type
);

Example usage

// observe any keypress within the document
var onkeypress = new EventObserver(document, 'keypress');

on()

Returns a newly instantiated event observer.

void on(
	String type
);

Example usage

// observe any keypress within the document
var onkeypress = document.on('keypress');

Instance methods

then()

Returns the observer, and executes all of the event data with the provided function.

void then(
	Function callback
);

Parameters

callback
Function that is called when an event occurs.
event
Event data that is dispatched

Example usage

// log the keycode each time a key is pressed
document.on('keypress').then(function (event) {
	console.log(event.keyCode);
});

filter()

Returns a new observer with the event data passing the test implemented by the provided function.

void filter(
	Function callback
);

Parameters

callback()
Function that is called when an event occurs.
event =>
Event data that is dispatched

Example usage

// only log events when the shift key is pressed

document.on('keypress').filter(function (event) {
	// only pass keypress events when the shift key is active
	return event.shiftKey;
}).then(function (event) {
	// log keypress events when the shift key is active
	console.log(event.keyCode);
});

map()

Returns a new observer with the event data returned by the provided function.

void map(
	Function callback
);

Parameters

callback
Function that is called when an event occurs.
event
Event data that is dispatched

Example usage

// log the keycode each time a key is pressed

document.on('keypress').map(function (event) {
	return event.keyCode;
}).then(function (keyCode) {
	console.log(keyCode);
});

stop()

Returns the observer, unsubscribing it from new event notifications.

void stop();

Example usage

// log the key and stop

document.on('keypress').then(function (event) {
	console.log(event.keyCode);

	onkeypress.stop();
});

until()

Returns the observer, unsubscribing it from new event notifications once the event data passes the test implemented by the provided function.

void until(
	Function callback
);

Parameters

callback
Function that is called when an event occurs.
event
Event data that is dispatched

Example usage

// log keyCodes until the shift key is pressed

document.on('keypress').then(function (event) {
	console.log(event.keyCode);
}).until(function (event) {
	return event.shiftKey;
});

To see EventObserver in action, visit the live demo.