5_introduction_to_events
dz / mdn / js / 1_javascript_building_blocks / 5_introduction_to_eventsSummary
Introduction To Events
Node Tree
- events
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 |