Skip to content


Subversion checkout URL

You can clone with
Download ZIP
jQuery Events for Object Oriented JavaScript
JavaScript CoffeeScript
Fetching latest commit...
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Eventralize - jQuery Events for Object Oriented JavaScript

Event handling done right.

Provide a hash of mouse/keyboard events, selectors and function names - Eventralize will do the rest.

  'event'          : 'functionName',
  'event selector' : 'functionName',
  'event selector, keydown(key) selector' : 'functionName'
}, context, 'namespace'); // <- Optional event namespace

Centralize your events.

Keep your event handling logic in one place and enable or disable everything with only a single line.

Gallery.prototype = {
    events: {
      'dblclick img' : 'zoom',
      'click .close, keydown(esc) document'  : 'close',
      'click .next, keydown(right) document' : 'next',
      'click .prev, keydown(left) document'  : 'prev'
    init: function(elem){
      this.$elem = $(elem).eventralize(, this);
    destroy: function() {
    //All functions are passed an extended 'event' object
    zoom  : function(event) { ... },
    close : function(event) { ... },
    next  : function(event) { ... },
    prev  : function(event) { ... }

Note: While generally discouraged, it's possible to use inline functions or function variables rather a string with the function name. This may be useful for classes that consist almost entirely of event handlers, or for event handlers with only a couple lines of code. For example:

Gallery.prototype = {
    events: {
        'dblclick img' : function() { ... },

Keyboard events made easy.

Bind individual key presses or combinations at the same time as your mouse events.

events: {
  'click .money, keydown(shift+4) document' : 'money'
init: function(elem){
  this.$elem = $(elem).eventralize(, this);
money: function() {
  alert('Vegas, baby!');

Bind locally or globally.

Bind events to the element or delegate based on your selector—or bind to the document, window or body.

events: {
  'click' : 'focus',
  'click .toolbar .save' : 'save',
  'scroll window' : 'handleScroll',
  'resize window, orientationchange document' : 'reposition'

Namespace everything at once.

Provide a namespace as the optional third parameter and all of your events will be correctly namespaced.

Gallery.prototype = {
    events: {
    init: function(elem) {
      this.$elem = $(elem);
      this.$elem.eventralize(, this, 'gallery');
    destroy: function() {
      this.$elem.uneventralize(, 'gallery');

Full event functionality

All functions are passed an extended 'event' object so you don't have to repeat yourself.

zoom: function(event) {
  event.eventralize; //True

  event.currentTarget; //The element matching the selector

How to Build

The code is compiled using CoffeeScript and minified using UglifyJS using the following commands:

coffee -c
uglifyjs -o jquery.eventralize.min.js jquery.eventralize.js

Contributing to Eventralize

Make sure you move the copyright/license block comment to the top of the compiled and minified JavaScript files before committing.

If you want to contribute in a way that changes the API, please file an issue before submitting a pull request so we can discuss how to appropriately integrate your ideas.


Contact me on GitHub or Twitter: @markdalgleish

Something went wrong with that request. Please try again.