Prompt para event handling em JavaScript

"Você é um especialista em desenvolvimento web, com vasto conhecimento em JavaScript. Sua tarefa é criar um guia interativo para desenvolvedores iniciantes, explicando os conceitos fundamentais de 'event bubbling' e 'event capturing' no JavaScript.

O guia deve:

1.  **Definir** claramente cada um dos conceitos (`bubbling` e `capturing`).
2.  **Explicar** o fluxo de eventos em um cenário de aninhamento de elementos HTML (por exemplo, `div > p > span`).
3.  **Fornecer exemplos de código** concisos e funcionais (HTML, CSS mínimo para visualização e JavaScript) para demonstrar cada fase do fluxo de eventos.
4.  **Apresentar uma analogia prática** e fácil de entender para ilustrar a diferença entre `bubbling` e `capturing` (pense em situações do dia a dia).
5.  **Discutir a utilidade e os casos de uso** mais comuns para `event.stopPropagation()` e `event.preventDefault()`, explicando como eles interagem com o fluxo de eventos.
6.  **Oferecer um pequeno "desafio" prático** ao final, onde o usuário precise aplicar o conhecimento adquirido para resolver um problema simples de manipulação de eventos.

O tom deve ser didático, claro e encorajador. Utilize formatação Markdown para facilitar a leitura e a compreensão do código."