JoiEvents

compose events like a native!

Read the book and enjoi!

Vocabulary

• OS Event: something happening in the browser. DOM Events being dispatched is an event, of course, but a callback triggered or native system task executed are also generally speaking an event.
• Event: a DOM event that is either triggered by an OS Event or dispatched by a JS script.
• Global events begin their propagation on the window object (capture phase). Global events commonly have {bubble: true, composed: true}, but they can also be dispatched directly on the window object.
• Local events are all events that do not begin their propagation on the window (capture phase).
• Native events are created by the browser.
• Custom events are created by a script.
• Preceding event propagates before another event.
• Trailing event propagates after another event.
• Composed event is triggered by one or more other events.
• Trigger event is an event that initiates a new composed event.
• Atomic event is not triggered by any other events, but something else.
• Event sequence: a series of ordered trigger events that combine to dispatch a composed event.
• Event listener: a JS function that is triggered by the occurrence of an event.
• defaultAction: a native function built into the browser that is triggered when an event completes propagation.
• Composed event function: a group of functions that together implement a composed event.
• Trigger function: one of many event listener functions that make up a composed event function. Trigger functions capture events, processes them, and most often dispatch a new composed event.
• Initial trigger function: a trigger function that initiates a composed event sequence and can register a group of secondary trigger functions for other events. The initial trigger functions are active when the composed event function is listening and not yet activated, and the initial trigger functions activate the composed event function. Initial trigger functions are commonly added to the document in the capture phase.
• Secondary trigger function: trigger functions that are activated when a composed event function is activated, and deactivated when the composed event function is deactivated. Secondary trigger functions are commonly added to the window in the capture phase.

Introduction

1. HowTo: Compose Events
2. HowTo: Combine Events and JS
3. HowTo: Combine Events and HTML
4. HowTo: Combine Events and CSS

Event to event composition

1. HowTo: Listen
2. Intro: EventComposition
3. WhatIs: propagation
4. HowTo: StopPropagation
5. Pattern: CancelClick
6. Pattern: EarlyBird
7. Pattern: PriorEvent
8. Pattern: AfterthoughtEvent
9. Pattern: ReplaceDefaultAction
10. Problem: PayAttention
11. Pattern: ReverseGlobalization

Event translation

1. Pattern: AttributeFilteredEvent
2. Pattern: TypeFilteredEvent
3. Pattern: DetailsOnDemand
4. Event: link-click
5. Pattern: SpecializedEventInterface
6. Pattern: MergedEvents

EventSequence patterns

1. Pattern: TakeNote
2. Pattern: PayAttention
3. Pattern: ListenUp
4. Pattern: EventAttribute
5. Pattern: MarkMyValues
6. Pattern: ShowGestureState (todo)
7. Pattern: DebounceEvents (todo)

Gestures: mouse

1. HowTo: drag'n'drop
2. Pattern: InvadeAndRetreat
3. Pattern: GrabTarget
4. Pattern: GrabMouse
5. Pattern: MouseMoveTrap
6. Pattern: MouseDoubleDown
7. Pattern: AlertBlurCall
8. Event: long-press
9. Event: mouse dragging

Gestures: touch

1. Problem: SloppyFingers
2. Problem: GestureStuttering
3. Pattern: TouchendPreventDefault
4. Problem: ConflictingGestures
5. Problem: CoarseSensors
6. Pattern: PassiveAggressiveTouchstart
7. Pattern: GrabTouch
8. Problem: WebDemocracy (todo)
9. Anti-pattern: RejectionBuildup (todo)
10. Event: touch dragging
11. Event: swipe
12. Event: pinch & .spin()

Routing

1. todo add navigation control freak
2. todo add the patterns on hash-based routing
3. todo add the patterns on slash-based routing
4. todo move in from chapter on translate events
5. https://instant.page/ try to use an event listener for mousemove that detects when the mouse cursor slows down over an element.

todo

1. fix the different long-press events so they are source code.

Personal comment

I was surprised to find how rarely EventComposition is used. It made me second guess my self. And, while I pursue these second guesses, I became even more surprised.

First, many native events follow the EventComposition pattern. Through its actions, the platform advocates for this pattern, implicitly, but strongly.

Second, pursuing this pattern reveals several flaws in other approaches and several large benefits for EventComposition:

• extreme ease of reuse, both across apps and within apps;
• extremely low coupling to other parts of the code;
• super clear interfaces yielding less confusion, misuse and general anxiety;
• and lightDOM composeability, ie. you can combine events from the same vantage point as you can native elements.

Yet, for some reason, few use this approach! Why is that? I really don't know. ¯\_(ツ)_/¯

Test

Test 2