Bean

Bean is a small, slick, cross-platform, framework-agnostic event utility designed for desktop, mobile, and touch-based browsers. In its simplest form - it works like this:

bean.add(element, 'click', function (e) {
  console.log('hello');
});

API

Bean has five methods, each packing quite a punch.

• bean.add()
• bean.one()
• bean.remove()
• bean.clone()
• bean.fire()

add()

bean.add() lets you attach event listeners to both elements and objects.

Signature

• {1} element {DOM Element} an HTML DOM element

• {2} event type(s) {String} an event (or multiple events) to listen to

• {3} handler {Function} the callback function

• {2,3} handlers {Object} a list of event keys with callback functions as the values

• {4,n} optional args

Examples

// simple
bean.add(element, 'click', handler);

// optional arguments passed to handler
bean.add(element, 'click', function(e, o1, o2) {
  console.log(o1, o2);
}, 'fat', 'ded');

// multiple events
bean.add(element, 'keydown keyup', handler);

// multiple handlers
bean.add(element, {
  click: function (e) {},
  mouseover: function (e) {},
  'focus blur': function (e) {}
});

// event delegated events
bean.add(element, '.content p', 'click', handler, queryEngine);

(note: to use event delegation with a selector, you must pass bean.add a reference to a selector engine like qwery or sizzle) Developers working on Mobile Webkit applications like iPhone or Android, you may wish to simply provide the following query selector with Bean:

bean.add(element, '.content p', 'click', fn, function (selector) {
  return document.querySelectorAll(selector);
});

Or alternatively, you can pass an array of elements (this actually cuts down on selector engine work, and is a more performant means of delegation if you know your DOM won't be changing:

bean.add(element, [el, el2, el3], 'click', handler);
//or
bean.add(element, $('.myClass'), 'click', handler);

(note: the focus, blur, and submit events will not delegate)

Namespacing

Bean also now supports namespacing your events! This makes it much easier to target them down the line with things like remove or fire. To name space an event just add a dot followed by your unique name identifier:

bean.add(element, 'click.fat', fn);
bean.add(element, 'click.ded', fn);
bean.add(element, 'click', fn);

//later...
bean.fire(element, 'click.ded');
bean.remove(element, 'click.fat');

//alternatively you can specify mutliple remove or fire handlers at once
bean.fire(element, 'click.ded.fat');
bean.remove(element, 'click.fat.ded');

one()

bean.one() is an alias for bean.add() except that the handler will only be executed once and then removed for the event type(s).

remove()

bean.remove() is how you get rid of listeners once you no longer want them. It's also a good idea to call remove on elements before you remove elements from your dom (this gives Bean a chance to clean up some things and prevents memory leaks)

// remove a single event handlers
bean.remove(element, 'click', handler);

// remove all click handlers
bean.remove(element, 'click');

// remove handler for all events
bean.remove(element, handler);

// remove multiple events
bean.remove(element, 'mousedown mouseup');

// remove all events
bean.remove(element);

// remove handlers for events using object literal
bean.remove(element, { click: clickHandler, keyup: keyupHandler })

clone()

bean.clone() is a method for cloning events from one element to another.

// clone all events at once by doing this:
bean.clone(toElement, fromElement);

// clone events of a specific type
bean.clone(toElement, fromElement, 'click');

fire()

bean.fire() gives you the ability to trigger events.

// fire a single event on an element
bean.fire(element, 'click');

// fire multiple types
bean.fire(element, 'mousedown mouseup');

custom events

Bean uses methods similar to Dean Edwards' event model to ensure custom events behave like real events, rather than just callbacks.

For all intents and purposes, you can just think of them as native events, which will bubble up, and everything else you would expect...

use them like this:

bean.add(element, 'partytime', handler);
bean.fire(element, 'partytime');

mouseenter, mouseleave

Bean provides you with two custom DOM events, mouseenter and mouseleave. They are essentially just helpers for making your mouseover/mouseout lives a bit easier.

use them like regular events:

bean.add(element, 'mouseenter', handler);

object support

Good news, everything you can do in Bean with an element, you can also do with an object! This is particularly useful for working with classes or plugins.

var inst = new Klass();
bean.add(inst, 'complete', handler);

//later on...
bean.fire(inst, 'complete');

Browser Support

Bean passes our tests in all the following browsers. If you've found bugs in these browsers or others please let us know!

• IE6, IE7, IE8, IE9
• Chrome 1-10
• Safari 4-5
• Firefox 3, 4

Other important browser notes

One of the great things about Bean is that it fixes a number of distinguishable browser differences and also provides proper cross-platform support for certain special events.

// normalized browser event model for default behavior and propagation
bean.add(el, 'click', function (e) {
  e.preventDefault();
  e.stopPropagation();
});

// a simple shortcut, since you usually want preventDefault() and stopPropagation() at the same time
// (works the same as the previous example)
bean.add(el, 'click', function (e) {
  e.stop();
});

// DOMContentLoaded
bean.add(document, 'DOMContentLoaded', fn);

// mousewheel
bean.add(el, 'mousewheel', fn);

// mobile
bean.add(window, 'orientationchange', fn);

// touch events
bean.add(el, 'touchstart touchmove touchend touchcancel', fn);

// gestures
bean.add(el, 'gesturestart gesturechange gestureend', fn);

Building Bean

Bean uses JSHint to keep some house rules as well as UglifyJS for its compression. For those interested in building Bean yourself. Run make in the root of the project.

Tests

point your browser at bean/tests/index.html

Ender Integration API

If you use Bean with Ender its API is greatly extended through its bridge file. This extension aims to give Bean the look and feel of jQuery, but at the tiny size of Bean.

Here's the run down of the method alias' added...

ADD EVENTS

• on - $(element).on('click', fn); NOTE: This API is likely to change slightly in the near future see #55
• addListener - $(element).addListener('click', fn);
• bind - $(element).bind('click', fn);
• listen - $(element).listen('click', fn);

REMOVE EVENTS

• unbind - $(element).unbind('click');
• unlisten - $(element).unlisten('click');
• removeListener - $(element).removeListener('click');

DELEGATE EVENTS

• delegate - $(element).delegate('.foo', 'click', fn);
• undelegate - $(element).undelegate('.foo', 'click');

CLONE EVENTS

• cloneEvents - $(element).cloneEvents('.foo', fn);

CUSTOM EVENTS

• fire / emit / trigger - $(element).trigger('click')

SPECIAL EVENTS

• hover - $(element).hover(enterfn, leavefn);
• blur - $(element).blur(fn);
• change - $(element).change(fn);
• click - $(element).click(fn);
• dblclick - $(element).dblclick(fn);
• focusin - $(element).focusin(fn);
• focusout - $(element).focusout(fn);
• keydown - $(element).keydown(fn);
• keypress - $(element).keypress(fn);
• keyup - $(element).keyup(fn);
• mousedown - $(element).mousedown(fn);
• mouseenter - $(element).mouseenter(fn);
• mouseleave - $(element).mouseleave(fn);
• mouseout - $(element).mouseout(fn);
• mouseover - $(element).mouseover(fn);
• mouseup - $(element).mouseup(fn);
• mousemove - $(element).mousemove(fn);
• resize - $(element).resize(fn);
• scroll - $(element).scroll(fn);
• select - $(element).select(fn);
• submit - $(element).submit(fn);
• unload - $(element).unload(fn);

Contributors

• Dustin Diaz
• Jacob Thornton
• Follow our software @dedfat