Event Handlers/Mouse & Keyboard Events

Mouse/Keyboard Events

 //whenever the user presses 'space', the color of the circle with change to green or blue
//whenever the user presses 'enter', the size of the circle will change between a radius of 2 and 10

An event handler is a type of function that is called when a specific event occurs (ex: click, double click, mouse move, key down, key up, etc)

KeyboardEventHandler and MouseEventHandler are standard in web browsers!

interface MouseEventHandler {
     (event: MouseEvent): void;
}

A function that belongs to the MouseEventHandler interface takes in some sort of MouseEvent (ex. click) and performs some action as a response.

interface KeyboardEventHandler {     
    (event: KeyboardEvent): void;
}

Similarly, functions of type KeyboardEventHandler take in a KeyboardEvent and do something as a result. Notice that both MouseEventHandler and KeyboardEventHandler are void functions. These two are prime examples of how not returning anything doesn't necessarily mean the function does nothing. These void functions allow your program to react to user interaction.

Every Event object has a keyCode property that identifies what key is associated with that event. These keyCodes let us write programs that do specific things based on specific keys being pressed.

let svgTag: SVG = new SVG("artboard");
 
function main(): void {
    let scene: Group = new Group();
 
    // TODO
    let happy: Color = (new Color(0, 1, 0));
    let sad: Color = (new Color(0, 0, 1));
 
    let circle = new Circle(10, 0, 0);
    circle.fill = happy;
    scene.add(circle);
 
    window.onkeydown = function (eventK: KeyboardEvent): void {
        if (eventK.keyCode === 32) {
        //32 is the keyCode for the space bar
            if (circle.fill === happy) {
                circle.fill = sad;
            } else if (circle.fill === sad) {
                circle.fill = happy;
            }
        } else if (eventK.keyCode === 13) {
        //13 is the keyCode for 'enter'
            if (circle.r === 2) {
                circle.r = 10;
            } else if (circle.r === 10) {
                circle.r = 2;
            }
        }
    };
 
    svgTag.render(scene);
}
 
main();

Whenever the user presses 'space', the color of the circle with change to green or blue
Whenever the user presses 'enter', the size of the circle will swap between a radius of 2 and 10.

You can also register callback functions for specific events. For example, if you had some MouseEvent e, you could decide that the computer needs to play Sandstorm every time you click. A line of code that would do something similar might look like this.

let playSandstorm = (e: MouseEvent): void => {
    // elided
};
let e: MouseEvent = new MouseEvent;
e.onclick = playSandstorm;

Note here that since we are just assigning playSandstorm to be the callback function when something is clicked, we don't have to 'call' the function right here (AKA include parentheses)...That's why the parentheses and arguments are missing. **This is the only circumstance in which parentheses are not needed when calling a function!

Comp 110 Event Handlers/Mouse & Keyboard Events

Mouse/Keyboard Events