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