From 48bd3f5f376223855a45ccc5d10766648d199e7a Mon Sep 17 00:00:00 2001
From: Silas <silascosta310@gmail.com>
Date: Sat, 15 Mar 2025 04:43:48 -0300
Subject: [PATCH 1/5] Inicio da traducao do artigo bubbling and capturing

---
 .../02-bubbling-and-capturing/article.md      | 34 +++++++++----------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/2-ui/2-events/02-bubbling-and-capturing/article.md b/2-ui/2-events/02-bubbling-and-capturing/article.md
index 2448cfa5b..417d31326 100644
--- a/2-ui/2-events/02-bubbling-and-capturing/article.md
+++ b/2-ui/2-events/02-bubbling-and-capturing/article.md
@@ -1,24 +1,24 @@
 # Bubbling and capturing
 
-Let's start with an example.
+Vamos começar com um exemplo.
 
-This handler is assigned to `<div>`, but also runs if you click any nested tag like `<em>` or `<code>`:
+Este manipulador de eventos foi atribuído a `<div>`, mas também é acionado caso você clique em qualquer elemento aninhado como `<em>` ou `<code>`:
 
 ```html autorun height=60
 <div onclick="alert('The handler!')">
-  <em>If you click on <code>EM</code>, the handler on <code>DIV</code> runs.</em>
+  <em>Se você clicar no<code>EM</code>, o manipulador na <code>DIV</code> será acionado.</em>
 </div>
 ```
 
-Isn't it a bit strange? Why does the handler on `<div>` run if the actual click was on `<em>`?
+Não é um pouco estranho? Por que o manipulador na `<div>` é acionado se o clique foi no `<em>`?
 
 ## Bubbling
 
-The bubbling principle is simple.
+O bubbling é simples
 
-**When an event happens on an element, it first runs the handlers on it, then on its parent, then all the way up on other ancestors.**
+**Quando um evento acontece em um elemento, ele primeiro executa os manipuladores nesse elemento, depois em seu elemento pai, e em seguida, sobe pelos outros ancestrais.**
 
-Let's say we have 3 nested elements `FORM > DIV > P` with a handler on each of them:
+Vamos supor que tenhamos 3 elementos aninhados `FORM > DIV > P` com um manipulador em cada um:
 
 ```html run autorun
 <style>
@@ -35,22 +35,22 @@ Let's say we have 3 nested elements `FORM > DIV > P` with a handler on each of t
 </form>
 ```
 
-A click on the inner `<p>` first runs `onclick`:
-1. On that `<p>`.
-2. Then on the outer `<div>`.
-3. Then on the outer `<form>`.
-4. And so on upwards till the `document` object.
+Um clique no `<p>` aciona primeiro o `onclick`:
+1. Neste `<p>`.
+2. Em seguida, na `<div>` externa.
+3. Depois, no `<form>`.
+4. E assim em diante até o objeto `document`.
 
 ![](event-order-bubbling.svg)
 
-So if we click on `<p>`, then we'll see 3 alerts: `p` -> `div` -> `form`.
+Então, se clicarmos no `<p>`, veremos 3 alerts: `p` -> `div` -> `form`.
 
-The process is called "bubbling", because events "bubble" from the inner element up through parents like a bubble in the water.
+O processo se chamado "bubbling", porque o evento "borbulha" do elemento mais interno para os elementos pais, com uma bolha na água.
 
-```warn header="*Almost* all events bubble."
-The key word in this phrase is "almost".
+```warn header="*Quase todos os eventos burbulham."
+A palavra-chave nessa frase é "quase".
 
-For instance, a `focus` event does not bubble. There are other examples too, we'll meet them. But still it's an exception, rather than a rule, most events do bubble.
+Por exemplo, um evento `focus` não borbulha. Existem outros exemplos também, que iremos conhecer. Mas ainda assim é uma exceção, e não a regra. A maioria dos eventos borbulha.
 ```
 
 ## event.target

From 5390de93ad68beeec42735f90b108ff619997784 Mon Sep 17 00:00:00 2001
From: Silas <silascosta310@gmail.com>
Date: Sat, 15 Mar 2025 19:43:35 -0300
Subject: [PATCH 2/5] traducao da secao event.target

---
 .../02-bubbling-and-capturing/article.md      | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/2-ui/2-events/02-bubbling-and-capturing/article.md b/2-ui/2-events/02-bubbling-and-capturing/article.md
index 417d31326..19301e032 100644
--- a/2-ui/2-events/02-bubbling-and-capturing/article.md
+++ b/2-ui/2-events/02-bubbling-and-capturing/article.md
@@ -55,27 +55,27 @@ Por exemplo, um evento `focus` não borbulha. Existem outros exemplos também, q
 
 ## event.target
 
-A handler on a parent element can always get the details about where it actually happened.
+Um manipulador em um elemento pai sempre pode obter detalhes sobre onde o evento realmente ocorreu.
 
-**The most deeply nested element that caused the event is called a *target* element, accessible as `event.target`.**
+**O elemento mais interno que causou o evento é chamado de elemento *target*(alvo), acessado como `event.target`.**
 
-Note the differences from `this` (=`event.currentTarget`):
+Note a diferença de `this` (=`event.currentTarget`):
 
-- `event.target` -- is the "target" element that initiated the event, it doesn't change through the bubbling process.
-- `this` -- is the "current" element, the one that has a currently running handler on it.
+- `event.target` - é o elemento "*target*(alvo)" que iniciou o evento, ele não muda durante o processo bubbling.
+- `this` - é o elemento "*current*(atual)",  que contém um manipulador em execução.
 
-For instance, if we have a single handler `form.onclick`, then it can "catch" all clicks inside the form. No matter where the click happened, it bubbles up to `<form>` and runs the handler.
+Por exemplo, se tivermos um único manipulador `form.onclick`, ele poderá capturar todos os cliques dentro do `<form>`. Não importa onde o clique aconteceu, ele borbulha até `<form>` e executa o manipulador.
 
-In `form.onclick` handler:
+No manipulador `form.onclick`:
 
-- `this` (=`event.currentTarget`) is the `<form>` element, because the handler runs on it.
-- `event.target` is the actual element inside the form that was clicked.
+- `this` (=`event.currentTarget`) é o elemento  `<form>`, porque o manipulador foi atribuído a ele.
+- `event.target` é o elemento do form que foi clicado.
 
-Check it out:
+Confira:
 
 [codetabs height=220 src="bubble-target"]
 
-It's possible that `event.target` could equal `this` -- it happens when the click is made directly on the `<form>` element.
+É possível que `event.target` seja igual a `this` - isso acontece quando o clique é feito diretamente no elemento `<form>`.
 
 ## Stopping bubbling
 

From 730774b4f959145ec1746a371d9ba47a6cf05ce9 Mon Sep 17 00:00:00 2001
From: Silas <silascosta310@gmail.com>
Date: Sat, 15 Mar 2025 21:02:32 -0300
Subject: [PATCH 3/5] Traducao da secao stopping bubbling

---
 .../02-bubbling-and-capturing/article.md      | 48 +++++++++----------
 1 file changed, 24 insertions(+), 24 deletions(-)

diff --git a/2-ui/2-events/02-bubbling-and-capturing/article.md b/2-ui/2-events/02-bubbling-and-capturing/article.md
index 19301e032..86cd121e3 100644
--- a/2-ui/2-events/02-bubbling-and-capturing/article.md
+++ b/2-ui/2-events/02-bubbling-and-capturing/article.md
@@ -14,7 +14,7 @@ Não é um pouco estranho? Por que o manipulador na `<div>` é acionado se o cli
 
 ## Bubbling
 
-O bubbling é simples
+O *bubbling*(borbulhamento) é simples.
 
 **Quando um evento acontece em um elemento, ele primeiro executa os manipuladores nesse elemento, depois em seu elemento pai, e em seguida, sobe pelos outros ancestrais.**
 
@@ -43,9 +43,9 @@ Um clique no `<p>` aciona primeiro o `onclick`:
 
 ![](event-order-bubbling.svg)
 
-Então, se clicarmos no `<p>`, veremos 3 alerts: `p` -> `div` -> `form`.
+Então, se clicarmos no `<p>`, veremos 3 *alerts*: `p` -> `div` -> `form`.
 
-O processo se chamado "bubbling", porque o evento "borbulha" do elemento mais interno para os elementos pais, com uma bolha na água.
+O processo se chama "bubbling", porque o evento "borbulha" do elemento mais interno para os elementos pais, com uma bolha na água.
 
 ```warn header="*Quase todos os eventos burbulham."
 A palavra-chave nessa frase é "quase".
@@ -61,15 +61,15 @@ Um manipulador em um elemento pai sempre pode obter detalhes sobre onde o evento
 
 Note a diferença de `this` (=`event.currentTarget`):
 
-- `event.target` - é o elemento "*target*(alvo)" que iniciou o evento, ele não muda durante o processo bubbling.
-- `this` - é o elemento "*current*(atual)",  que contém um manipulador em execução.
+- `event.target` - é o elemento "*target*(alvo)" que iniciou o evento, ele não muda durante o processo *bubbling*.
+- `this` - é o elemento "*current*(atual)", que contém um manipulador em execução.
 
 Por exemplo, se tivermos um único manipulador `form.onclick`, ele poderá capturar todos os cliques dentro do `<form>`. Não importa onde o clique aconteceu, ele borbulha até `<form>` e executa o manipulador.
 
 No manipulador `form.onclick`:
 
-- `this` (=`event.currentTarget`) é o elemento  `<form>`, porque o manipulador foi atribuído a ele.
-- `event.target` é o elemento do form que foi clicado.
+- `this` (=`event.currentTarget`) é o elemento `<form>`, porque o manipulador foi atribuído a ele.
+- `event.target` é o elemento dentro do `<form> `que foi clicado.
 
 Confira:
 
@@ -77,42 +77,42 @@ Confira:
 
 É possível que `event.target` seja igual a `this` - isso acontece quando o clique é feito diretamente no elemento `<form>`.
 
-## Stopping bubbling
+## Parando o bubbling
 
-A bubbling event goes from the target element straight up. Normally it goes upwards till `<html>`, and then to `document` object, and some events even reach `window`, calling all handlers on the path.
+Um evento *bubbling* vai do elemento alvo subindo para os elementos pais. Normalmente, ele sobe até `<html>`, em seguida ao objeto `document`, alguns eventos alcançam até mesmo o `window`, executando todos os manipuladores no caminho.
 
-But any handler may decide that the event has been fully processed and stop the bubbling.
+Mas qualquer manipulador pode decidir se o evento foi totalmente processado e parar o *bubbling*.
 
-The method for it is `event.stopPropagation()`.
+O método para isso é `event.stopPropagation()`.
 
-For instance, here `body.onclick` doesn't work if you click on `<button>`:
+Por exemplo, aqui `body.onclick` não funciona se você clicar no `<button>`:
 
 ```html run autorun height=60
 <body onclick="alert(`the bubbling doesn't reach here`)">
-  <button onclick="event.stopPropagation()">Click me</button>
+  <button onclick="event.stopPropagation()">Clique em mim</button>
 </body>
 ```
 
 ```smart header="event.stopImmediatePropagation()"
-If an element has multiple event handlers on a single event, then even if one of them stops the bubbling, the other ones still execute.
+Se um elemento tem múltiplos manipuladores para um único evento, então mesmo que um deles interrompa o *bubbling*, os outros ainda serão executados.
 
-In other words, `event.stopPropagation()` stops the move upwards, but on the current element all other handlers will run.
+Em outras palavras, `event.stopPropagation()` interrompe o movimento ascendente, mas no elemento atual todos os manipuladores serão executados.
 
-To stop the bubbling and prevent handlers on the current element from running, there's a method `event.stopImmediatePropagation()`. After it no other handlers execute.
+Para parar o *bubbling* e previnir que os manipualadores do elemento atual sejam executados, existe um método `event.stopImmediatePropagation()`. Após isso, nenhum manipulador será executado.
 ```
 
-```warn header="Don't stop bubbling without a need!"
-Bubbling is convenient. Don't stop it without a real need: obvious and architecturally well thought out.
+```warn header="Não interrompa o *bubbling* sem necessidade!"
+*Bubbling* é conveniente. Não o interrompa sem uma razão óbvia e arquiteturalmente planejada.
 
-Sometimes `event.stopPropagation()` creates hidden pitfalls that later may become problems.
+Às vezes, `event.stopPropagation()` cria armadilhas que se tornam problemas futuramente.
 
-For instance:
+Por exemplo:
 
-1. We create a nested menu. Each submenu handles clicks on its elements and calls `stopPropagation` so that the outer menu won't trigger.
-2. Later we decide to catch clicks on the whole window, to track users' behavior (where people click). Some analytic systems do that. Usually the code uses `document.addEventListener('click'…)` to catch all clicks.
-3. Our analytic won't work over the area where clicks are stopped by `stopPropagation`. Sadly, we've got a "dead zone".
+1. Criamos um menu aninhado. Cada submenu lida com cliques em seus elementos e chama `stopPropagation`, de forma que o manipulador do menu externo não seja acionado.
+2. Depois decidimos capturar cliques em toda a *window* para observar o comportamento do usuário (onde as pessoas clicam). Algum sistemas analíticos fazem isso. Em geral, os códigos usam `document.addEventListener('click'…)` para capturar todos os cliques.
+3. Nossa análise não funcionará nas áreas onde os cliques são interrompidos por `stopPropagation`. Infelizmente, temos uma "zona morta".
 
-There's usually no real need to prevent the bubbling. A task that seemingly requires that may be solved by other means. One of them is to use custom events, we'll cover them later. Also we can write our data into the `event` object in one handler and read it in another one, so we can pass to handlers on parents information about the processing below.
+Geralmente, não existe necessidade de prevenir o *bubbling*. Uma tarefa que aparentemente necessita disso pode ser resolvida por outros meios. Um deles é usar eventos customizados, que veremos em breve. Também podemos escrever nossos dados dentro do objeto `event` em um manipulador e lê-los em outro, para que possamos passar informações sobre o processamento aos manipuladores dos elementos pais.
 ```
 
 

From a67188cc2a84d5f8aec653e3ba05877e51344446 Mon Sep 17 00:00:00 2001
From: Silas <silascosta310@gmail.com>
Date: Sun, 13 Apr 2025 23:33:55 -0300
Subject: [PATCH 4/5] corrige erros

---
 .../02-bubbling-and-capturing/article.md      | 42 +++++++++----------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/2-ui/2-events/02-bubbling-and-capturing/article.md b/2-ui/2-events/02-bubbling-and-capturing/article.md
index 86cd121e3..3a5f6f713 100644
--- a/2-ui/2-events/02-bubbling-and-capturing/article.md
+++ b/2-ui/2-events/02-bubbling-and-capturing/article.md
@@ -47,7 +47,7 @@ Então, se clicarmos no `<p>`, veremos 3 *alerts*: `p` -> `div` -> `form`.
 
 O processo se chama "bubbling", porque o evento "borbulha" do elemento mais interno para os elementos pais, com uma bolha na água.
 
-```warn header="*Quase todos os eventos burbulham."
+```warn header="*Quase todos os eventos borbulham."
 A palavra-chave nessa frase é "quase".
 
 Por exemplo, um evento `focus` não borbulha. Existem outros exemplos também, que iremos conhecer. Mas ainda assim é uma exceção, e não a regra. A maioria dos eventos borbulha.
@@ -62,7 +62,7 @@ Um manipulador em um elemento pai sempre pode obter detalhes sobre onde o evento
 Note a diferença de `this` (=`event.currentTarget`):
 
 - `event.target` - é o elemento "*target*(alvo)" que iniciou o evento, ele não muda durante o processo *bubbling*.
-- `this` - é o elemento "*current*(atual)", que contém um manipulador em execução.
+- `this` - é o elemento que esta atualmente executando o manipulador.
 
 Por exemplo, se tivermos um único manipulador `form.onclick`, ele poderá capturar todos os cliques dentro do `<form>`. Não importa onde o clique aconteceu, ele borbulha até `<form>` e executa o manipulador.
 
@@ -94,14 +94,14 @@ Por exemplo, aqui `body.onclick` não funciona se você clicar no `<button>`:
 ```
 
 ```smart header="event.stopImmediatePropagation()"
-Se um elemento tem múltiplos manipuladores para um único evento, então mesmo que um deles interrompa o *bubbling*, os outros ainda serão executados.
+Se um elemento tem múltiplos manipuladores para um único evento, mesmo que um deles interrompa o *bubbling*, os outros ainda serão executados.
 
 Em outras palavras, `event.stopPropagation()` interrompe o movimento ascendente, mas no elemento atual todos os manipuladores serão executados.
 
-Para parar o *bubbling* e previnir que os manipualadores do elemento atual sejam executados, existe um método `event.stopImmediatePropagation()`. Após isso, nenhum manipulador será executado.
+Para parar o *bubbling* e prevenir que os manipuladores do elemento atual sejam executados, existe um método `event.stopImmediatePropagation()`. Após isso, nenhum manipulador será executado.
 ```
 
-```warn header="Não interrompa o *bubbling* sem necessidade!"
+```warn header="Não interrompa o *bubbling* desnecessariamente!"
 *Bubbling* é conveniente. Não o interrompa sem uma razão óbvia e arquiteturalmente planejada.
 
 Às vezes, `event.stopPropagation()` cria armadilhas que se tornam problemas futuramente.
@@ -112,31 +112,31 @@ Por exemplo:
 2. Depois decidimos capturar cliques em toda a *window* para observar o comportamento do usuário (onde as pessoas clicam). Algum sistemas analíticos fazem isso. Em geral, os códigos usam `document.addEventListener('click'…)` para capturar todos os cliques.
 3. Nossa análise não funcionará nas áreas onde os cliques são interrompidos por `stopPropagation`. Infelizmente, temos uma "zona morta".
 
-Geralmente, não existe necessidade de prevenir o *bubbling*. Uma tarefa que aparentemente necessita disso pode ser resolvida por outros meios. Um deles é usar eventos customizados, que veremos em breve. Também podemos escrever nossos dados dentro do objeto `event` em um manipulador e lê-los em outro, para que possamos passar informações sobre o processamento aos manipuladores dos elementos pais.
+Geralmente, não existe necessidade de prevenir o *bubbling*. Uma tarefa que aparentemente necessita disso pode ser resolvida por outros meios. Um deles é usar eventos customizados, que veremos em breve. Também podemos escrever nossos dados no objeto `event` em um manipulador e lê-los em outro, para podermos passar informações sobre o processamento aos manipuladores dos elementos pais.
 ```
 
 
 ## Capturing
 
-There's another phase of event processing called "capturing". It is rarely used in real code, but sometimes can be useful.
+Existe outra fase do processamento de eventos chamada *capturing*(captura). Raramente é usado no dia a dia, mas pode ser útil às vezes.
 
-The standard [DOM Events](https://www.w3.org/TR/DOM-Level-3-Events/) describes 3 phases of event propagation:
+O Padrão [DOM Events](https://www.w3.org/TR/DOM-Level-3-Events/) descreve três fases da propagação de eventos:
 
-1. Capturing phase -- the event goes down to the element.
-2. Target phase -- the event reached the target element.
-3. Bubbling phase -- the event bubbles up from the element.
+1. Fase de captura -- o evento desce até o elemento.
+2. Fase alvo -- o evento alcança o elemento alvo.
+3. Fase de borbulhamento -- o evento borbulha do elemento.
 
-Here's the picture, taken from the specification, of the capturing `(1)`, target `(2)` and bubbling `(3)` phases for a click event on a `<td>` inside a table:
+Aqui está a imagem da especificação, das fases de captura `(1)`, alvo `(2)` e borbulhamento `(3)` para um evento clique no `<td>` dentro de um table:
 
 ![](eventflow.svg)
 
-That is: for a click on `<td>` the event first goes through the ancestors chain down to the element (capturing phase), then it reaches the target and triggers there (target phase), and then it goes up (bubbling phase), calling handlers on its way.
+Isto é: um evento clique no `<td>`, o evento passa pela cadeia de ancestrais até o elemento (fase de captura), chega ao alvo e aciona lá (fase alvo), depois sobe (fase de borbulhamento), acionando os manipuladores no caminho.
 
-Until now, we only talked about bubbling, because the capturing phase is rarely used.
+Até agora, só falamos do *bubbling*, *capturing* raramente é utilizado.
 
-In fact, the capturing phase was invisible for us, because handlers added using `on<event>`-property or using HTML attributes or using two-argument `addEventListener(event, handler)` don't know anything about capturing, they only run on the 2nd and 3rd phases.
+Na verdade, a fase de captura é invisível para nós, porque manipuladores adicionados usando a propriedade `on<event>`, atributos HTML ou `addEventListener(event, handler)` não lidam com a captura, sendo executados somente na segunda e terceira fases.
 
-To catch an event on the capturing phase, we need to set the handler `capture` option to `true`:
+Para pegarmos um evento na fase de captura, nós precisamos configurar a opção `capture` do manipulador como `true`:
 
 ```js
 elem.addEventListener(..., {capture: true})
@@ -145,15 +145,15 @@ elem.addEventListener(..., {capture: true})
 elem.addEventListener(..., true)
 ```
 
-There are two possible values of the `capture` option:
+A opção `capture` tem dois valores possíveis:
 
-- If it's `false` (default), then the handler is set on the bubbling phase.
-- If it's `true`, then the handler is set on the capturing phase.
+- Se for `false` (padrão),  o manipulador é configurado na fase de borbulhamento.
+- Se for `true`, o manipulador é configurado para a fase de captura.
 
 
-Note that while formally there are 3 phases, the 2nd phase ("target phase": the event reached the element) is not handled separately: handlers on both capturing and bubbling phases trigger at that phase.
+Embora existam três fases, a segunda fase (fase alvo: o evento alcançou o elemento) não é tratada separadamente. Manipuladores definidos para as fases de captura e borbulhamento também são acionados nessa fase.
 
-Let's see both capturing and bubbling in action:
+Vejamos a captura e o borbulhamento em ação:
 
 ```html run autorun height=140 edit
 <style>

From 509111f3d4e5e2878f7e5fd515d014a2c0b68075 Mon Sep 17 00:00:00 2001
From: Silas <silascosta310@gmail.com>
Date: Mon, 14 Apr 2025 20:17:45 -0300
Subject: [PATCH 5/5] finalizando taducao

---
 .../02-bubbling-and-capturing/article.md      | 56 +++++++++----------
 1 file changed, 28 insertions(+), 28 deletions(-)

diff --git a/2-ui/2-events/02-bubbling-and-capturing/article.md b/2-ui/2-events/02-bubbling-and-capturing/article.md
index 3a5f6f713..d5d0b1120 100644
--- a/2-ui/2-events/02-bubbling-and-capturing/article.md
+++ b/2-ui/2-events/02-bubbling-and-capturing/article.md
@@ -177,57 +177,57 @@ Vejamos a captura e o borbulhamento em ação:
 </script>
 ```
 
-The code sets click handlers on *every* element in the document to see which ones are working.
+O código define manipuladores de clique em todos elementos do documento para ver quais estão funcionando
 
-If you click on `<p>`, then the sequence is:
+Se você clicar no `<p>`, a sequência é:
 
-1. `HTML` -> `BODY` -> `FORM` -> `DIV -> P` (capturing phase, the first listener):
-2. `P` -> `DIV` -> `FORM` -> `BODY` -> `HTML` (bubbling phase, the second listener).
+1. `HTML` -> `BODY` -> `FORM` -> `DIV -> P` (fase de captura, o primeiro manipulador):
+2. `P` -> `DIV` -> `FORM` -> `BODY` -> `HTML` (fase de borbulhamento, o segundo manipulador).
 
-Please note, the `P` shows up twice, because we've set two listeners: capturing and bubbling. The target triggers at the end of the first and at the beginning of the second phase.
+Note que `P` aparece duas vezes, pois definimos dois manipuladores: um para captura e outro para borbulhamento. O alvo é acionado no final da primeira fase e no início da segunda.
 
-There's a property `event.eventPhase` that tells us the number of the phase on which the event was caught. But it's rarely used, because we usually know it in the handler.
+Existe a propriedade `event.eventPhase` que nos diz o número da fase em que o evento foi capturado. Raramente é usada, pois geralmente sabemos a fase no manipulador.
 
-```smart header="To remove the handler, `removeEventListener` needs the same phase"
-If we `addEventListener(..., true)`, then we should mention the same phase in `removeEventListener(..., true)` to correctly remove the handler.
+```smart header="Para remover o manipulador, `removeEventListener` deve especificar a mesma fase"
+Se usarmos `addEventListener(..., true)`, devemos especificar a mesma fase em `removeEventListener(..., true)` para remover corretamente o manipulador.
 ```
 
-````smart header="Listeners on the same element and same phase run in their set order"
-If we have multiple event handlers on the same phase, assigned to the same element with `addEventListener`, they run in the same order as they are created:
+````smart header="Manipuladores no mesmo elemento e na mesma fase são executados na ordem de atribuição"
+Se tivermos múltiplos manipuladores de evento na mesma fase, atribuídos ao mesmo elemento com  `addEventListener`, eles executarão na ordem em que foram criados:
 
 ```js
-elem.addEventListener("click", e => alert(1)); // guaranteed to trigger first
+elem.addEventListener("click", e => alert(1)); // dispara primeiro
 elem.addEventListener("click", e => alert(2));
 ```
 ````
 
-```smart header="The `event.stopPropagation()` during the capturing also prevents the bubbling"
-The `event.stopPropagation()` method and its sibling `event.stopImmediatePropagation()` can also be called on the capturing phase. Then not only the futher capturing is stopped, but the bubbling as well.
+```smart header="O `event.stopPropagation()` durante a captura também impede o borbulhamento"
+O `event.stopPropagation()` método e seu irmão `event.stopImmediatePropagation()` também podem ser chamados na fase de captura. Portanto, não só a próxima fase de captura é interrompida como também a fase de borbullhamento.
 
-In other words, normally the event goes first down ("capturing") and then up ("bubbling"). But if `event.stopPropagation()` is called during the capturing phase, then the event travel stops, no bubbling will occur.
+Em outras palavras, normalmente o evento "desce" ("capturing") e depois sobe ("bubbling"). Mas se `event.stopPropagation()` é chamado na fase de captura, a viagem para, nenhum borbulhamento ocorerá.
 ```
 
 
-## Summary
+## Resumo
 
-When an event happens -- the most nested element where it happens gets labeled as the "target element" (`event.target`).
+Quando um evento acontece -- o elemento mais aninhado onde ocorre é etiquetado como o "elemento alvo" (`event.target`).
 
-- Then the event moves down from the document root to `event.target`, calling handlers assigned with `addEventListener(..., true)` on the way (`true` is a shorthand for `{capture: true}`).
-- Then handlers are called on the target element itself.
-- Then the event bubbles up from `event.target` to the root, calling handlers assigned using `on<event>`, HTML attributes and `addEventListener` without the 3rd argument or with the 3rd argument `false/{capture:false}`.
+- Em seguida, o evento se move da raiz do documento para o `event.target`, chamando manipuladores atribuídos com `addEventListener(..., true)` no caminho (`true` is a shorthand for `{capture: true}`).
+- Os manipuladores são chamados no próprio elemento alvo.
+- Por fim, o evento borbulha do `event.target` até a raiz do documento, chamando manipuladores atribuídps usando `on<event>`, atributos HTML e `addEventListener` without the 3rd argument osem o terceiro argumento ou com o terceiro elemento como `false/{capture:false}`.
 
-Each handler can access `event` object properties:
+Todo manipulador pode acessar as propriedades do objeto `event`:
 
-- `event.target` -- the deepest element that originated the event.
-- `event.currentTarget` (=`this`) -- the current element that handles the event (the one that has the handler on it)
-- `event.eventPhase` -- the current phase (capturing=1, target=2, bubbling=3).
+- `event.target` -- o elemento mais profundo que originou o evento.
+- `event.currentTarget` (=`this`) -- o elemento que atualmente manipula o evento (o elemento ao qual o manipulador foi atribuído)
+- `event.eventPhase` -- a fase atual (captura=1, alvo=2, borbulhamento=3).
 
-Any event handler can stop the event by calling `event.stopPropagation()`, but that's not recommended, because we can't really be sure we won't need it above, maybe for completely different things.
+Qualquer manipulador de evento pode parar o evento chhamando `event.stopPropagation()`, mas isso não é recomendado, pois não teremos certeza se não precisaremos dele posteriormente, talvez, para coisas completamente diferentes.
 
-The capturing phase is used very rarely, usually we handle events on bubbling. And there's a logical explanation for that.
+A fase de captura é raramente usada, normalmente lidamos com eventos na fase de borbulhamento. Existe uma explicação lógica para isso.
 
-In real world, when an accident happens, local authorities react first. They know best the area where it happened. Then higher-level authorities if needed.
+No mundo real, quando um acidente acontece, autoridades locais reagem primeiro. Eles conhecem melhor a área onde aconteceu. Em seguida, as autoridades de nível superior caso necessário.
 
-The same for event handlers. The code that set the handler on a particular element knows maximum details about the element and what it does. A handler on a particular `<td>` may be suited for that exactly `<td>`, it knows everything about it, so it should get the chance first. Then its immediate parent also knows about the context, but a little bit less, and so on till the very top element that handles general concepts and runs the last one.
+É o mesmo com manipuladores de eventos. O código que define o manipulador em um elemento específico sabe o máximo de detalhes sobre o elemento e o que ele faz. Um manipulador em um `<td>` particular pode ser adequado exatamente para esse `<td>`, o manipulador conhece tudo sobre o elemento, portanto deve ter a oportunidade primeiro. O elemento pai também sabe o contexto, um pouco menos, é dessa forma em diante até o elemento no topo, que lida com conceitos gerais e executa o último.
 
-Bubbling and capturing lay the foundation for "event delegation" -- an extremely powerful event handling pattern that we study in the next chapter.
+Borbulhamento e captura são as bases para o "event delegation" -- um manipulador de eventos extremamente poderoso que estudaremos no próximo capítulo.
\ No newline at end of file