Caption for Flowchart: How do events and actions work in Ember?

events_actions_flowchart_caption.txt

Title of Chart: How do events and actions work in Ember?

Top of Chart
Step 1. Something happens! A DOM event is born.
    - Proceed to Section A: DOM Events, Step 2: Event is triggered on node.

Section A
Title: DOM Events
Description: This logic is implemented by the browser and uses standard DOM events.

Step 2. Event is triggered on node.
Step 3. Question: Is there an event handler on this node?
    - If yes, proceed to Step 3.
    - If no, proceed to Step 6: Does this node have a parent node?
Step 3. Run event handler.
    - Note on Step 3:
        - This handler might be regular JavaScript:
            - Code Example: `<div onclick="alert('hello');">`
        - It could also be a bound Ember action:
            - Code Example: `<div onclick={{action "foo"}}>`
Step 4. Question: Is this the special Ember event handler, defined on #root?
    - If yes, proceed to Section B: Ember Actions, Step 8: Start with node that was initial target of event.
        + Note on transition to Section B: The handler on this element kicks off handling Ember actions.
    - If no, proceed to Step 5: Does the handler stop propagation? 
Step 5. Question: Does the handler stop propagation?
    - If yes, proceed to Step 15: The event is completed.
    - If no, proceed to Step 6: Does this node have a parent node?
     - Note on Step 5: The handler function is passed the DOM event as an argument. It can stop propagation by calling `event.stopPropgation()`.
Step 6. Question: Does this node have a parent node?
    - If yes, proceed to Step 7: Walk up the DOM tree one level and handle parent node.
    - If no, proceed to Step 15: The event is completed.
Step 7. Walk up the DOM tree one level and handle parent node.
    - Return to Step 2: Event is triggered on node.

Section B
Title: Ember Actions
Description: This logic is implemented by Ember and uses Ember actions.

Step 8. Start with node that was initial target of event.
Step 9. Handle actions for this node.
Step 10. Question: Is there an action handler registered for this node?
    - If yes, proceed to Step 11: Run action handler.
    - If no, proceed to Step 15: Does this node have a parent node?
Step 11. Run action handler
    - Note on Step 11:
        - This handler might be an Ember action added directly to a DOM node:
            - Code Example: `<div {{action "foo"}}>`
        - It could also be a property of a component:
            - Code Example: `{{my-component click=(action "foo")}}`
Step 12. Question: Does the action stop propagation?
    - If yes, proceed to Step 15: The event is completed.
    - If no, proceed to Step 13: Does this node have a parent node?
    - Note on Step 12:
        - If the handler is passed the DOM event as an argument, it can stop propagation by calling `event.stopPropagation();`
        - The action can also prevent propagation with the bubbles property.
            - Code Example: `{{action "foo" bubbles=false}}`
Step 13. Question: Does this node have a parent node?
    - If yes, proceed to Step 14: Walk up the DOM tree one level and handle parent node.
    - If no, proceed to Step 15: The event is completed.
Step 14. Walk up the DOM tree one level and handle parent node.
    - Return to Step 9: Handle actions for this node.

Bottom of Chart
Step 15. The event is completed.