mdn/js/1_javascript_building_blocks/5_introduction_to_events

5_introduction_to_events

dz / mdn / js / 1_javascript_building_blocks / 5_introduction_to_events

Summary

Introduction To Events

Node Tree

Nodes

events
content Events
children event_handler, event_objects, nodejs_event_model (contrasts from WebAPI event model), signal, things_that_happen (description), event_bubbling, event_delegation

signal
content signal
parents events

things_that_happen
content Things that happen in the system you are programming
parents events

event_handler
content Event Handler: reacts to event
children event_listener (Interchangeable, mostly), registering
parents events

registering
content Registering: block of code is defined to run in response to event
parents event_handler

event_listener
content Event Listener
children other_event_listener_mechanisms, addEventListener
parents event_handler

addEventListener
content addEventListener()
children focus, mouse_over_out, multiple_listeners, removeEventListener, blur, click, dblClick, enable_event_capture (capture option)
parents event_listener

focus
content focus
parents addEventListener

blur
content blur
parents addEventListener

click
content click
parents addEventListener

dblClick
content dblClick
parents addEventListener

mouse_over_out
content mouse-over/mouse-out
parents addEventListener

removeEventListener
content removeEventListener()
children abort_addEventListener
parents addEventListener

abort_addEventListener
content Events can also be removed by passing an AbortSignal to addEventListener(), then later calling abort() on controller owning it
parents removeEventListener

other_event_listener_mechanisms
content Other event listener mechanisms
children event_handler_props, inline_event_handler
parents event_listener

event_handler_props
content Event handler properties
children on_plus_event_name (description), only_one_handler
parents other_event_listener_mechanisms

on_plus_event_name
content Objects propertie names starting with "on" plus the event name, such as btn.onClick
parents event_handler_props

multiple_listeners
content Multiple listeners can be added
children only_one_handler (vs)
parents addEventListener

only_one_handler
content Only one handler
parents event_handler_props, multiple_listeners

inline_event_handler
content Inline Event Handler (deprecated, don't use)
parents other_event_listener_mechanisms

event_objects
content Event Objects
children keyboard_event, passed_to_event_handlers, preventing_default_behavior, target
parents events

passed_to_event_handlers
content Automatically passed to event handlers to provide extra features and info
parents event_objects

target
content target: property of event object, reference to element event occured on
parents event_objects

keyboard_event
content Keyboard event: specialized event object with key property that tells which key prossed
parents event_objects

preventing_default_behavior
content Preventing default behavior
children preventDefault
parents event_objects

preventDefault
content preventDefault()
parents preventing_default_behavior

event_bubbling
content Event Bubbling: how browsers handle events targeted at ensted elements
children reverse_event_bubbling (reverse), stopPropagation, vid_ex, why_both_event_capture_and_bubbling, bubbling_enables_delegation (enables delegation), click_ex, event_capture
parents events

click_ex
content Click Example: event bubbles up from the inner most element that was clocked
parents event_bubbling

vid_ex
content Video Example: problem created with the video toggles between hidden/unhidden quickly
children stopPropagation (solution)
parents event_bubbling

stopPropagation
content stopPropagation(): called inside vent object in event handler, stops event from bubbling up
parents vid_ex, event_bubbling

event_capture
content Event Capture
children reverse_event_bubbling (description), why_both_event_capture_and_bubbling, enable_event_capture
parents event_bubbling

reverse_event_bubbling
content Reverse of Event Bubbling: event fires first on least nested element, then on successively more nested elements until target is reached.
parents event_capture, event_bubbling

enable_event_capture
content Enable event capture by passing capture option to addEventListener()
parents addEventListener, event_capture

why_both_event_capture_and_bubbling
content historic reasons for both event capture and bubbling: In early internet, netstacpe only used event capture, and Internet Explorer only used event bubbling. W3C standardization included both.
parents event_capture, event_bubbling

event_delegation
content Event Delegation
children event_delegation_desc (description), bubbling_enables_delegation
parents events

bubbling_enables_delegation
content Event bubbling enables event delegation
parents event_bubbling, event_delegation

event_delegation_desc
content User interats with large number of child elements, set event listener on parent and have events bubble up to parent, rather than individual event listeners
parents event_delegation

nodejs_event_model
content node.js event model: listeners listen to events, emitters emit events periodically.
children nodejs_desc
parents events

nodejs_desc
content node.js: popular JS runtime that is used to build network and server-side applications
parents nodejs_event_model