Event handlers in Paper.js

Question

I am new to Paper.js, and I was wondered by the event system, while reading tutorial. Thats how event hanling described in tutorial:

var path;
function onMouseDown(event) {
    // Create a path:
    path = new Path();
    path.strokeColor = 'black';
    // Add the mouse down position:
    path.add(event.point);
}

function onMouseUp(event) {
    // Add the mouse up position:
    path.add(event.point);
}

So, its just functions in global namespace...
Eventually I have a few questions about it, and I didnt found anything on the internet on this:
- How to bind event handler to particular canvas?
- How to bind event handler to particular "object" (raster image, rectangle, etc)?
- How to bind multiple event handlers to something?

Answer 1

You can bind multiple event handlers using the attach() method (or its jQuery-style alias, on()). You can remove them with detach() or off(). Here's a modified example from the event handling documentation:

// Create a circle shaped path at the center of the view:
var path = new Path.Circle({
    center: view.center,
    radius: 25,
    fillColor: 'black'
});

var shiftPath = function() {
    this.position += new Point(15,15);
};

// When the mouse enters the item, set its fill color to red:
path.attach('mouseenter', function() {
    this.fillColor = 'red';
});

path.on('mouseenter', shiftPath);

// When the mouse leaves the item, set its fill color to black
// and remove the mover function:
path.on('mouseleave', function() {
    this.fillColor = 'black';
    path.detach('mouseenter', shiftPath);
});

If you want to set an event handler for all instances of a type of object, it's best to create a factory function, as per this answer.