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

5. HowTo: Listen
6. Intro: EventComposition
7. WhatIs: propagation
8. HowTo: StopPropagation
9. Pattern: CancelClick
10. Pattern: EarlyBird
11. Pattern: PriorEvent
12. Pattern: AfterthoughtEvent
13. Pattern: ReplaceDefaultAction
14. Problem: PayAttention
15. Pattern: ReverseGlobalization

Event translation

13. Pattern: AttributeFilteredEvent
14. Pattern: TypeFilteredEvent
15. Pattern: DetailsOnDemand
16. Event: link-click
17. Pattern: SpecializedEventInterface
18. Pattern: MergedEvents

EventSequence patterns

18. Pattern: TakeNote
19. Pattern: PayAttention
20. Pattern: ListenUp
21. Pattern: EventAttribute
22. Pattern: MarkMyValues
23. Pattern: ShowGestureState (todo)
24. Pattern: DebounceEvents (todo)

Gestures: mouse

24. HowTo: drag'n'drop
25. Pattern: InvadeAndRetreat
26. Pattern: GrabTarget
27. Pattern: GrabMouse
28. Pattern: MouseMoveTrap
29. Pattern: MouseDoubleDown
30. Pattern: AlertBlurCall
31. Event: long-press
32. Event: mouse dragging

Gestures: touch

31. Problem: SloppyFingers
32. Problem: GestureStuttering
33. Pattern: TouchendPreventDefault
34. Problem: ConflictingGestures
35. Problem: CoarseSensors
36. Pattern: PassiveAggressiveTouchstart
37. Pattern: GrabTouch
38. Problem: WebDemocracy (todo)
39. Anti-pattern: RejectionBuildup (todo)
40. Event: touch dragging
41. Event: swipe
42. Event: pinch & .spin()

Routing

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

todo

99. 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