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 four methods, each packing quite a punch. * bean.add() * 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'); 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 multiple events bean.remove(element, 'mousedown mouseup'); // remove all events bean.remove(element); 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 Edward's event model](http://dean.edwards.name/weblog/2009/03/callbacks-vs-events/) 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(); }); // 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](http://www.jshint.com/) to keep some house rules as well as [UglifyJS](https://github.com/mishoo/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 it's API is greatly extended through it's 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's added... **ADD EVENTS** + on - $(element).on('click', fn); + 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', fn); + undelegate - $(element).undelegate('.foo'); **CLONE EVENTS** + cloneEvents - $(element).cloneEvents('.foo', fn); **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](https://github.com/fat/bean/commits/master?author=ded) * [Jacob Thornton](https://github.com/fat/bean/commits/master?author=fat) * Follow our software [@dedfat](http://twitter.com/dedfat)