neverland / bean Goto Github PK

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');
});

Bean has five methods, each packing quite a punch.

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

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

• {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

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

Note: the 5th parameter (selector engine) of previous Bean releases is now deprecated and will be removed in future versions. Use setSelectorEngine() instead.

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)

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

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

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 })

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

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

bean.setSelectorEngine() allows you to set a default selector engine for all your delegation needs.

bean.setSelectorEngine(qwery);

Note: querySelectorAll() is used as the default selector engine, this is available on most modern platforms such as mobile WebKit. To support event delegation on older browsers you will need to install a selector engine.

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

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

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

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

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

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.

point your browser at bean/tests/index.html

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')