# Events

The following example similar to ones in most of the event descriptions in the p5.js references. They show that the p5js `mouseClicked` can be used in two ways.
1. To handle mouse click events anywhere on the page.
2. To specify an event handling function that works only on the canvas.
`CanvasClass` event handlers work the second way. But as this example shows, one can still use the first method and just have the event apply to the `CanvasClass`.

    let can;
    let d;
    let g;

    function setup() {
      can = createCanvasClass(100, 100);
      can.parent("Example");
       // Attach listener for clicks on the canvas only.
       // The CanvasClass way of handling events.
      can.mouseClicked(changeGray);
      d = 10;
      g = 100;
    }

    function draw() {
      can.background(g);
      can.ellipse(width / 2, height / 2, d, d);
    }

        // This function fires after the mouse has been
        // clicked anywhere.  No CanvasClass equivalent.
    function mouseClicked() {
      d = d + 10
    }

        // This function fires after the mouse has been clicked
        // on the canvas.  The CanvasClass way to handle events.
    function changeGray() {
     g = random(0, 255);
    }

James Brink, 6/27/2020