5_introduction_to_events

dz / mdn / js / 1_javascript_building_blocks / 5_introduction_to_events

Summary

Introduction To Events

Node Tree

• events
  • event_bubbling
    • bubbling_enables_delegation
    • click_ex
    • event_capture
      • enable_event_capture
      • reverse_event_bubbling
      • why_both_event_capture_and_bubbling
    • reverse_event_bubbling
    • stopPropagation
    • vid_ex
      • stopPropagation
    • why_both_event_capture_and_bubbling
  • event_delegation
    • bubbling_enables_delegation
    • event_delegation_desc
  • event_handler
    • event_listener
      • addEventListener
        • blur
        • click
        • dblClick
        • enable_event_capture
        • focus
        • mouse_over_out
        • multiple_listeners
          • only_one_handler
        • removeEventListener
          • abort_addEventListener
      • other_event_listener_mechanisms
        • event_handler_props
          • on_plus_event_name
          • only_one_handler
        • inline_event_handler
    • registering
  • event_objects
    • keyboard_event
    • passed_to_event_handlers
    • preventing_default_behavior
      • preventDefault
    • target
  • nodejs_event_model
    • nodejs_desc
  • signal
  • things_that_happen

Nodes

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

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	addEventListener, other_event_listener_mechanisms
parents	event_handler

addEventListener
content	addEventListener()
children	blur, click, dblClick, enable_event_capture (capture option), focus, mouse_over_out, multiple_listeners, removeEventListener
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	multiple_listeners, event_handler_props

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	bubbling_enables_delegation (enables delegation), click_ex, event_capture, reverse_event_bubbling (reverse), stopPropagation, vid_ex, why_both_event_capture_and_bubbling
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	event_bubbling, vid_ex

event_capture
content	Event Capture
children	enable_event_capture, reverse_event_bubbling (description), why_both_event_capture_and_bubbling
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_bubbling, event_capture

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

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_bubbling, event_capture

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

bubbling_enables_delegation
content	Event bubbling enables event delegation
parents	event_delegation, event_bubbling

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