Browsers and Events - 17%

Question 1

addEventListener params

Answer 1

1. Type - ex: ‘click’
2. Listener - ex: JS Fn or object w/a handleEvent method
3. Optional 3rd param can be either an options object, or useCapture boolean

Question 2

addEventListener options obj

Answer 2

Options obj properties:
- Capture - boolean, see useCapture card
- Once - boolean, Indicates the handler should only be invoked once
- Passive - boolean, The invoked fn will never call preventDefault (even if specified in the fn)
- Signal - This is an AbortSignal - Listener gets removed when the given AbortSignal object’s abort method is called

Question 3

addEventListener useCapture boolean

Answer 3

Will trigger event handlers on event targets beneath it on the DOM tree
Calls events in order from outside to inside
False by default
Ex: if the inner div is clicked, and the outer div has an event handler, the outer div’s handler function will be called, then the inner div’s handler fn

Question 4

History API properties

Answer 4

• length - # of session history entries, includes current page
• scrollRestoration - Allows web apps to set default scroll restoration behavior on history navigation. Can be auto or manual.
• state - returns a value representing the state at the top of the history stack - this is a way to look at the state w/o having to wait for a popstate event

Question 5

History API methods

Answer 5

back, forward, go, pushState, replaceState
go - Asynchronously loads a page from the session history, -1 for prev page or 1 for the next page. Has no effect if out of bounds. Calling w/o params or a value of 0 reloads the current page.
pushState - pushes the given data onto the session history stack with the specified title (and, if provided, URL) Note: title ignored by all browsers but Safari
replaceState - updates the most recent entry on the history stack to have the specified data, title, and, if provided, URL

Question 6

popstate event

Answer 6

A popstate event is dispatched to the window each time the active history entry changes while the user navigates the session history. It changes the current history entry to that of the last page the user visited, OR if history.pushState or history.replaceState were used, that history entry is used instead.

Question 7

event objects

Answer 7

These are objs automatically passed to event handlers when fired
event.target - this refers to the element that triggered the event (such as a button)
event.currentTarget refers to the element that the eventListener is on
If event listener is on the outer div, and the button was clicked, the event.target is the button and the event.currentTarget is the outer div

Question 8

event bubbling

Answer 8

Default behavior of nested elements that have event handlers
Ex: button inside div inside body - if all 3 have event handlers, all 3 will be fired when the button is clicked (starting w/button, then div, then body)
use stopPropogation( ) method on the event object to stop the bubbling

Question 9

event capture

Answer 9

Reverses the default order of Event Bubbling
ex: normally if button is clicked order is button, div, body - with event capture will be body, then div, then button.
See useCapture boolean card.

Question 10

Node.js

Answer 10

JS runtime - use JS to build network and server-side applications.

Question 11

Node.js events

Answer 11

Node’s event model is different from JS - relies on listeners to listen for events and emitters to emit events periodically - while this doesn’t sound very different, the code is very different.
Uses on( ) to register an event listener and once( ) to register an event listener that unregisters after running once.

Question 12

DOM

Answer 12

Web API for web documents, represents the document as nodes and objects.
Can be used w/any scripting language (a script is a program run by a browser)
Most nodes are elements, but not all

Question 13

DOM data types (some)

Answer 13

Document, node, element, nodeList, attribute, namedNodeMap
Node - every object in the document is a node
Element - objects that implement both the DOM Element interface and the Node interface
NodeList - array of elements
Attribute - nodes in the DOM, much like elements (rare)
NamedNodeMap - like a NodeList, except a Map

Question 14

DOM Interfaces

Answer 14

Many DOM objects implement several different interfaces
Ex: HTML form element gets its ‘name’ property from HTMLFormElement interface and its ‘className’ property from HTMLElement interface, but both properties are in the form object.

Question 15

Default actions

Answer 15

Actions built into the browser, such as key presses and mouse events. These can be prevented or customized by JS using event.preventDefault method.

Question 16

Pointer events

Answer 16

DOM events fired for a pointing device. Designed to create a single DOM event model to handle various pointing input devices (mouse, pen/stylus, touch).

Event types are similar to mouse events (mousedown/pointerdown, mousemove/pointermove, etc.).

The event contains the properties present in mouse events (client coordinates, target element, button states, etc.) in addition to new properties for other forms of input: pressure, contact geometry, tilt, etc.

Question 17

Timers

Answer 17

Fns that allow you to delay the execution of code or to repeat code at specified intervals. They are not part of JS, but are provided by the browser or runtime environment.

The 2 main timer fns are setTimeout and setInterval.

Both return an ID which can be used to stop the timer with clearTimeout() or clearInterval()

Question 18

Debouncing

Answer 18

Used to limit the time b/t mult executions of a fn. The idea is to group sequential calls in a single one, so you don’t overload the browser.
ex:
window.addEventListener(‘resize’,
debounce(() => console.log(‘resized’), 300);
- Fn will be triggered once the user stops resizing

Question 19

Phases of Event Propogation

Answer 19

Capturing - event goes through the ancestor elements down to the target element
Target - reaches the target
Bubbling - bubbling begins

Question 20

table methods
table.createTbody
tbody.insertRow

Question 21

cookie

Answer 21

add a single cookie to a webpage with document.cookie = “key=value”

Question 22

Ensure cache is not used

Answer 22

W/dev tools opened, long-press the reload button and select ‘Hard reload’
Access the Network panel, check the ‘disable cache’ checkbox

Question 23

Format code in Sources panel

Answer 23

Click the ‘pretty print’ icon at the bottom of the editor pane

Question 24

localStorage

Answer 24

When storing an obj, it gets stringified, so must use JSON.parse to turn it back into an obj upon retrieval.

Question 25

document.body

Answer 25

.insertBefore (no insert after)
If you need to insert after, will need to use .nextSibling w/the 2nd arg
ex:
document.body.insertBefore(el1, el2.nextSibling)
^ this acheives adding el1 after el2