JavaScript Events

Question 1

What is the event for clicking on a button?

Answer 1

click

button.addEventListener(‘click’, cb);

Question 2

What is the event for losing focus?

Answer 2

blur

canvas.addEventListener(‘blur’, cb);

(on the window it’s - onblur)
window.onblur

Question 3

What is the event for gaining focus?

Answer 3

focus

canvas.addEventListener(‘focus’, cb);

(on the window it’s - onfocu)
window.onfocus

Question 4

Which events do you use to pause a game - if the tabs or changed or the browser is no longer the main app?

Answer 4

blur / focus

Question 5

What event do you use to determine where the mouse is on screen?

Answer 5

mousemove

You can do this on the canvas. NOTE: it returns screen coords - so make sure you subtract the mouse coordinates from the canvas coords.

var rect = canvas.getBoundingClientRect();
mousex = evt.x - rect.left;
mousey = evt.y - rect.top;

Question 6

What is the event for starting a ‘touch’?

Answer 6

touchstart

canvas.addEventListener(‘touchstart’, callback);

Question 7

What is the event for ending a touch?

Answer 7

touchend

canvas.addEventListener(‘touchend’, callback);

Question 8

How would you prevent a user from dragging the canvas?

Answer 8

In the touchstart event handler - make sure you call:

evt.preventDefault

(NOTE: This probably isn’t an issue in something like Intel XDK)

Question 9

What is the event for detecting a touch has moved?

Answer 9

touchmove

Question 10

How would you prevent users from double tapping, to zoom into the canvas?

Answer 10

have a evt.preventDefault call in the touchend event