Touch events are triggered when viewing the page on a touch device, such as a smartphone or tablet.

They allow you to track multitouch events.

There are four touch events:

• touchstart a touch event has started (the surface is touched)
• touchend a touch event has ended (the surface is no longer touched)
• touchmove the finger (or whatever is touching the device) moves over the surface
• touchcancel the touch event has been cancelled

Every time a touch event occurs, you receive a TouchEvent object:

const link = document.getElementById('my-link')
link.addEventListener('touchstart', (event) => {
  // touch event started
})

Here are the properties you can access on that event:

• identifier a unique identifier for this specific event. Used to track multi-touch events. Same finger = same identifier.
• clientX / clientY the x and y coordinates of the touch point relative to the browser window, regardless of scrolling
• screenX / screenY the x and y coordinates of the touch point in screen coordinates
• pageX / pageY the x and y coordinates of the touch point in page coordinates (including scrolling)
• target the element touched

Lessons in this unit:

0:	Introduction
1:	Handling events
2:	The `DOMContentLoaded` event
3:	The `event` object
4:	Mouse events
5:	Keyboard events
6:	`preventDefault()`
7:	Stopping event propagation
8:	Bubbling and capturing
9:	Form submit event
10:	Input fields events
11:	Creating custom events
12:	Keyboard Events
13:	Mouse Events
14:	▶︎ Touch Events
15:	Form Events