Add jQuery style aliases to Callback and use #on() in the examples rather than #attach().

examples/Paperjs.org/InteractiveTiger.html

@@ -15,7 +15,7 @@
 		var items = project.activeLayer.firstChild.children;
 		var mouseIsDown = false;
 		for (var i = 0; i < items.length; i++) {
-			items[i].attach({
+			items[i].on({
 				mousedown: function(event) {
 					mouseIsDown = true;
 				},

src/core/Callback.js

@@ -13,6 +13,7 @@
 /**
  * @name Callback
  * @namespace
+ * @private
  */
 var Callback = {
 	attach: function(type, func) {
@@ -82,7 +83,14 @@ var Callback = {
 		return !!(this._handlers && this._handlers[type]);
 	},
 
+	// Install jQuery-style aliases to our event handler methods
+	on: '#attach',
+	off: '#detach',
+	trigger: '#fire',
+
 	statics: {
+		// Override inject() so that sub-classes automatically add the accessors
+		// for the event handler functions (e.g. #onMouseDown) for each property
 		inject: function(/* src, ... */) {
 			for (var i = 0, l = arguments.length; i < l; i++) {
 				var src = arguments[i],

src/item/Item.js

@@ -2660,7 +2660,7 @@ var Item = this.Item = Base.extend(Callback, {
 	 * 
 	 * Attach an event handler to the item.
 	 *
-	 * @name Item#attach
+	 * @name Item#on
 	 * @function
 	 * @param {String('mousedown', 'mouseup', 'mousedrag', 'click',
 	 * 'doubleclick', 'mousemove', 'mouseenter', 'mouseleave')} type the event
@@ -2680,19 +2680,19 @@ var Item = this.Item = Base.extend(Callback, {
 	 * });
 	 * 
 	 * // When the mouse enters the item, set its fill color to red:
-	 * path.attach('mouseenter', function() {
+	 * path.on('mouseenter', function() {
 	 * 	this.fillColor = 'red';
 	 * });
 	 * 
 	 * // When the mouse leaves the item, set its fill color to black:
-	 * path.attach('mouseleave', function() {
+	 * path.on('mouseleave', function() {
 	 * 	this.fillColor = 'black';
 	 * });
 	 */
 	/**
 	 * Attach one or more event handlers to the item.
 	 *
-	 * @name Item#attach^2
+	 * @name Item#on^2
 	 * @function
 	 * @param {Object} param An object literal containing one or more of the
 	 * following properties: {@code mousedown, mouseup, mousedrag, click,
@@ -2710,7 +2710,7 @@ var Item = this.Item = Base.extend(Callback, {
 	 * path.fillColor = 'black';
 	 * 
 	 * // When the mouse enters the item, set its fill color to red:
-	 * path.attach({
+	 * path.on({
 	 * 	mouseenter: function(event) {
 	 * 		this.fillColor = 'red';
 	 * 	},
@@ -2742,7 +2742,7 @@ var Item = this.Item = Base.extend(Callback, {
 	 * 	});
 	 * 
 	 * 	// Attach the handers inside the object literal to the path:
-	 * 	path.attach(pathHandlers);
+	 * 	path.on(pathHandlers);
 	 * }
 	 */
 

src/tool/Tool.js

@@ -414,7 +414,7 @@ var Tool = this.Tool = PaperScopeItem.extend(/** @lends Tool# */{
 	 * 
 	 * Attach an event handler to the tool.
 	 *
-	 * @name Tool#attach
+	 * @name Tool#on
 	 * @function
 	 * @param {String('mousedown', 'mouseup', 'mousedrag', 'mousemove',
 	 * 'keydown', 'keyup')} type the event type
@@ -424,7 +424,7 @@ var Tool = this.Tool = PaperScopeItem.extend(/** @lends Tool# */{
 	/**
 	 * Attach one or more event handlers to the tool.
 	 *
-	 * @name Tool#attach^2
+	 * @name Tool#on^2
 	 * @function
 	 * @param {Object} param An object literal containing one or more of the
 	 * following properties: {@code mousedown, mouseup, mousedrag, mousemove,

src/ui/View.js

@@ -455,7 +455,7 @@ var View = this.View = Base.extend(Callback, /** @lends View# */{
 	 * 
 	 * Attach an event handler to the view.
 	 *
-	 * @name View#attach
+	 * @name View#on
 	 * @function
 	 * @param {String('frame', 'resize')} type the event type
 	 * @param {Function} function The function to be called when the event
@@ -472,12 +472,12 @@ var View = this.View = Base.extend(Callback, /** @lends View# */{
 	 * 	path.rotate(3);
 	 * };
 	 * 
-	 * view.attach('frame', frameHandler);
+	 * view.on('frame', frameHandler);
 	 */
 	/**
 	 * Attach one or more event handlers to the view.
 	 *
-	 * @name View#attach^2
+	 * @name View#on^2
 	 * @function
 	 * @param {Object} param An object literal containing one or more of the
 	 * following properties: {@code frame, resize}.
@@ -491,7 +491,7 @@ var View = this.View = Base.extend(Callback, /** @lends View# */{
 	 * 	path.rotate(3);
 	 * };
 	 * 
-	 * view.attach({
+	 * view.on({
 	 * 	frame: frameHandler
 	 * });
 	 */
@@ -515,7 +515,7 @@ var View = this.View = Base.extend(Callback, /** @lends View# */{
 	 * 	path.rotate(3);
 	 * };
 	 * 
-	 * view.attach({
+	 * view.on({
 	 * 	frame: frameHandler
 	 * });
 	 *