Imagina este escenario:
Está creando una lista de usuarios. Muestra sus nombres, colores favoritos y correos electrónicos. Cuando hace clic en un usuario (una fila de la tabla), desea que lo lleve al registro de usuario. Excepto cuando hace clic en el correo electrónico, debería aparecer un cuadro de diálogo de correo electrónico.
Puede escribir un código como este (estamos usando una tabla aquí porque es fácil de entender, aunque, por supuesto, podríamos usar algo mucho más complicado en nuestro proyecto):
Name Colors Susie Blue, Red [email protected]
Si quisiera hacer clic en una de esas filas, probablemente agregaría una
onClickfunción a la fila. De esa forma, si hacen clic en cualquier lugar de la fila, pueden ir directamente al registro de usuario.
Para cuidar el correo electrónico, haremos un
ef> tag on the text.
Event propagation is a way to describe the “stack” of events that are fired in a web browser. In our table example above, clicking on the
a tag is the first event that we will fire, but there are other events too.
To understand that concept, you must understand that the elements on a web browser are nested. They do not cover each other up. So a click on the
a tag also clicks on the row, the table, the
div in which the table is nested, and anything else all the way out to
document , the complete container that holds everything in your browser.
If we’ve put any other
onClick events inside of these other elements, they will also be fired when we click on the
a link in the table. That’s why we will be directed to the user record when we click on the email link. It’s going to perform both the
onClick function for the
a link and the
onClick function for the row.
The movement of events “up” from the most-nested element (
a) out to the least-nested (
document) is referred to as “bubbling.” If events start in the “outer-most” element and moved “down,” that is referred to as “trickling.” All you probably care about is the default behavior: bubbling.
Honestly, I hadn’t run into any use-case for caring about event propagation until this week, when I needed to build a table with a checkbox in it. Unfortunately for me, when I tried to set up the checking functionality, it took me to the record. Fortunately, I did some training earlier (see references below) that gave me a clue on exactly what I had to Google.
You may be thinking: why not just use
e.preventDefault()? That is indeed the first thing I tried, but there simply is no default behavior for a span (unlike a form, whose default submit behavior will refresh the page).
- This Stack Overflow answer, which nicely sums up some of the more nuanced bits of event capture and propagation.