Rescreva essa parte da string com as seguintes condições:
      1. Não elimine NENHUMA informação dada no artigo.
      2. Termos, variáveis, expressões ou referências devem ser SEMPRE mantidos em inglês.
      3. Apenas transcreva o artigo para um inglês mais simples, tornando ele mais literal e direto, sem alterar o contexto.
      4. Não remova as tags HTML e nem os "#thedivisor#".
      5. Você deve me enviar sua resposta em texto puro, sem markdown.

      #thedivisor#Event handlers receive an <strong class="font-bold">event object</strong> as their only argument. By convention, it’s usually called <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">e</code>, which stands for “event”. You can use this object to read information about the event.#thedivisor#That event object also lets you stop the propagation. If you want to prevent an event from reaching parent components, you need to call <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">e.stopPropagation()</code> like this <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">Button</code> component does:#thedivisor#When you click on a button:#thedivisor#<li class="leading-relaxed mb-1">React calls the <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">onClick</code> handler passed to <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">&lt;button&gt;</code>.</li>
<li class="leading-relaxed mb-1">That handler, defined in <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">Button</code>, does the following:<!-- -->
<ul class="ms-6 my-3 list-disc">
<li class="leading-relaxed mb-1">Calls <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">e.stopPropagation()</code>, preventing the event from bubbling further.</li>
<li class="leading-relaxed mb-1">Calls the <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">onClick</code> function, which is a prop passed from the <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">Toolbar</code> component.</li>
</ul>
</li>
<li class="leading-relaxed mb-1">That function, defined in the <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">Toolbar</code> component, displays the button’s own alert.</li>
<li class="leading-relaxed mb-1">Since the propagation was stopped, the parent <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">&lt;div&gt;</code>’s <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">onClick</code> handler does <em>not</em> run.</li>#thedivisor#<li class="leading-relaxed mb-1">Calls <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">e.stopPropagation()</code>, preventing the event from bubbling further.</li>
<li class="leading-relaxed mb-1">Calls the <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">onClick</code> function, which is a prop passed from the <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">Toolbar</code> component.</li>#thedivisor#As a result of <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">e.stopPropagation()</code>, clicking on the buttons now only shows a single alert (from the <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">&lt;button&gt;</code>) rather than the two of them (from the <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">&lt;button&gt;</code> and the parent toolbar <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">&lt;div&gt;</code>). Clicking a button is not the same thing as clicking the surrounding toolbar, so stopping the propagation makes sense for this UI.#thedivisor#In rare cases, you might need to catch all events on child elements, <em>even if they stopped propagation</em>. For example, maybe you want to log every click to analytics, regardless of the propagation logic. You can do this by adding <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">Capture</code> at the end of the event name:#thedivisor#Each event propagates in three phases:#thedivisor#<li class="leading-relaxed mb-1">It travels down, calling all <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">onClickCapture</code> handlers.</li>
<li class="leading-relaxed mb-1">It runs the clicked element’s <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">onClick</code> handler.</li>
<li class="leading-relaxed mb-1">It travels upwards, calling all <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">onClick</code> handlers.</li>#thedivisor#Capture events are useful for code like routers or analytics, but you probably won’t use them in app code.