Polling: The machine listens to all key-states at all times, and when a keypress is registered, it places this event in a queue. The queue is constantly checking the queue. Most programmers avoid polling.

A better mechanism: the system actively notifies the program when an event occurs. Browsers do this by allowing us to register functions as handlers for specific events.

You can made a node handle an event in two kinds of ways:

• button.addEventListener("click", () => {...})
• button.onclick = "..."

However, a button can only have one onclick attribute, so you can register only one handler per node that way. The addEventListener method allows you to add any number of handlers as you want. removeEventListener removes a handler, useful if you want to achieve a certain effect only once.

Event handler functions are passed an argument: the event object. This object holds information about the event.

Events propagate outward, meaning the more specific handlers get to go before the less specific ones. From the node where the event happened, to that node's parent, on and on to the root of the document.

Most event objects have a target property that refers to the node where they originated. Use it to handle the specific element where the event happened.

Many events have a default action. You can disable this with the preventDefaukt method, but you should typically not do this unless you have a really good reason to (unpleasant UX).

keydown registers when a key is pushed down, but if you hold it down it will fire again and again until the key is released (keyup).

shiftKey, ctrlKey, altKey and metaKey properties of events let you check if these keys are being held down (key combinations).

mousedown and mouseup, similar to keydown and keyup. dblclick for two clicks close together. mousemove when mouse pointer moves, can be used to track mouse position.

mousedown, mouseup and click events upon a tap on your screen. touchstart when tap starts, touchmove if the finger moves, touchend when tap ends.

Screens can detect multiple touches, so their event objects have a touches property, which holds an array-like object of point, each of which has its own clientX, clientY, pageX and pageY.

scroll event. Use innerHeight, innerWidth, pageYOffest etc. to mace calculations about where on the page the user is.

When an element gains focus, the focus event is fired. When it loses focus, blur event. These events dont propagate: parent element handlers don't get notified when a child element gains or loses focus.

When a page finishes loading, the load event fires on the window and document body objects. Remember that the content of <script> is run immediately when the tag is encountered, which may be too soon. The load event also doesn't propagate.

beforeUnload when the page is closed or navigated away from (like by following a link).

let timer = setTimeout(() => {...}, 500); to set a timer. clearTimeout(timer); to remove it. You can debounce these and schedule events with them.

Through HTTP protocols a client sends a request, which contains a method (usually GET) and a path to identify a resource. The server handles the request and reponds with a status code and a response body. Requests and responses can contain headers with additional info.

Fetch: the interface through which browser JavaScript can make HTTP requests.

fetch("/18_http.html").then(r => r.text()).then(text => {
  console.log(`The page starts with ${text.slice(0, 15)}`);
});

Browsers make GET requests to fetch the resources to display the webpage. Through forms on the page, information (through checkboxes, file pickers, text fields etc.) can be entered by the user and sent as a request for a new page when the form is submitted.

Form fields can be manipulated with JavaScript. When they're changed, the change event is fired. When text is typed, input is fired. They also receive keyboard events. Read the field's content through properties like value or checked.

Form field elements can also occur outside of forms. When a form is submitted, the submit event is fired on it.

Filepicker: when the user has selected a file from their system, the FileReader interface can access the content of this file from a JavaScript program.

To save information even after page reloads, use the localStorage (to save the data forever or until the user clears it) or sessionStorage (until the browser is closed) objects.