Browsers and Events - 17% Flashcards
addEventListener params
- Type - ex: ‘click’
- Listener - ex: JS Fn or object w/a handleEvent method
- Optional 3rd param can be either an options object, or useCapture boolean
addEventListener options obj
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
addEventListener useCapture boolean
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
History API properties
- 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
History API methods
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
popstate event
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.
event objects
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
event bubbling
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
event capture
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.
Node.js
JS runtime - use JS to build network and server-side applications.
Node.js events
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.
DOM
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
DOM data types (some)
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
DOM Interfaces
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.
Default actions
Actions built into the browser, such as key presses and mouse events. These can be prevented or customized by JS using event.preventDefault method.
Pointer events
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.
Timers
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()
Debouncing
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
Phases of Event Propogation
Capturing - event goes through the ancestor elements down to the target element
Target - reaches the target
Bubbling - bubbling begins
table methods
table.createTbody
tbody.insertRow
cookie
add a single cookie to a webpage with document.cookie = “key=value”
Ensure cache is not used
W/dev tools opened, long-press the reload button and select ‘Hard reload’
Access the Network panel, check the ‘disable cache’ checkbox
Format code in Sources panel
Click the ‘pretty print’ icon at the bottom of the editor pane
localStorage
When storing an obj, it gets stringified, so must use JSON.parse to turn it back into an obj upon retrieval.
document.body
.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
