Skip to content

Instantly share code, notes, and snippets.

@jonathantneal
Created August 29, 2012 18:31
Show Gist options
  • Save jonathantneal/3516745 to your computer and use it in GitHub Desktop.
Save jonathantneal/3516745 to your computer and use it in GitHub Desktop.
EventListener // envisions an event listener object

EventListener.js

EventListener envisions an object that controls the event listener properties, such as the target, type, listener, and whether or not it is registered.

Usage

Creating an event listener is similar to addEventListener with object parameters.

EventListener({ target: window, type: "click", listener: function () { /* Do Something */ } });

The EventListener Object

dispatch(event)

A method to dispatch the listener, independent of other events, accepting an optional parameter as the event.

listener

The listener to execute on dispatch. If the listener is changed while the EventListener object is registered, the old listener will no longer be registered.

registered

The boolean indicating whether or not the event listener is registered. Setting it to true or false will register or unregister the event listener.

target

The target node to listen to. If the target is changed while the EventListener object is registered, the old target will no longer be registered.

type

The type of event to listen for. If the type is changed while the EventListener object is registered, the old type will no longer be registered.

More Usage

var eo = EventListener({ target: window, type: "click", listener: function () { /* Do Something */ } }); // creates an EventListener object.

eo.registered = true; // registers the listener, now the listener will fire when somewhere within the window is clicked.

// eo.registered = false; // would have unregistered the listener.

eo.type = "mousedown"; // registers the listener for "mousedown", unregistering it from "click". 

eo.dispatch({ pageX: 320, pageY: 480 }); // dispatches the listener independent of other events, accepting an optional parameter as the event.

Example

http://jsfiddle.net/HVbkf/1/

(function (global) {
function EventListener(parameters) {
var self = Object.defineProperties(this, {
dispatch: {
enumerable: true,
value: function (event) { return listener.call(self, event), self; }
},
listener: {
enumerable: true,
get: function () { return listener; },
set: function (value) { !value && fail("listener"); registered && self.remove(); listener = value; registered && self.add(); }
},
registered: {
enumerable: true,
get: function () { return registered; },
set: function (value) { value ? !registered && target.addEventListener(type, self.dispatch) : registered && target.removeEventListener(type, self.dispatch); registered = !!value; }
},
target: {
enumerable: true,
get: function () { return listener; },
set: function (value) { !value && fail("target"); registered && self.remove(); target = value; registered && self.add(); }
},
type: {
enumerable: true,
get: function () { return type; },
set: function (value) { !value && fail("type"); registered && self.remove(); type = value; registered && self.add(); }
}
}), target, type, listener, registered;
self.target = parameters.target;
self.type = parameters.type;
self.listener = parameters.listener;
self.registered = parameters.registered;
return self;
}
function fail(message) {
throw Error("EventListener: " + message + " is not properly defined");
}
global.EventListener = function (parameters) { return new EventListener(parameters); }
})(this);
@jonathantneal
Copy link
Author

The IE8 compatible version does not give you the ability to change the target, type, or listener once they have been set.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment