# Events

There is another `CanvasClass` at the end of this page that is used to test changing mouse listeners.

`CanvasClass` events occur only when the mouse is over the `CanvasClass`. (mouseOut, keyUp and dragLeave occur when the mouse leaves the `CanvasClass`.) The values `mouseX` and `mouseY` track the mouse only when it is over the canvas.

You will notice a difference in touch events. CanvasClass updates its mouseX and mouseY before its touchStarted is called. The normal p5 action is to update its mouseX and mouseY after its touchStarted is called.

You can drag images (1 or more at a time) and drop them onto either canvas. One of the images will show on the right side of that canvas. All of the images dropped on the `CanvasClass` will have a thumbnail in a tray below the canvases. Then you can click on an image and it will be displayed in the `CanvasClass` above the first image.

The mouse events (include drag events) can be changed by just calling the function with a new handler or deleted by calling the handler function without any arguments (E. g. mouseMoved(). But unfortunately, the other events (key and drop) cannot be deleted and should not be changed. Changing and deleting event handlers is tested at the end of this page

The p5.js file: events.pjs

James Brink, 7/3/2020

### Testing changing and removing listeners for some events.