Hay tres fases diferentes durante el ciclo de vida de un evento de JavaScript.
- Fase de captura
- Fase objetivo
- Fase burbujeante
Siguen el mismo orden que se indica arriba.
La fase de captura es cuando el evento desciende al elemento. La fase de destino es cuando el evento llega al elemento y la fase de burbujeo es cuando el evento brota del elemento.
Entonces, entre las tres fases de un evento, ¿qué fase usa addEventListener() y cómo puede cambiarlo el programador?
html
<!DOCTYPE html>
<html>
<body>
<div class="container">
<button id="btn">Click Me!</button>
</div>
<script type="text/javascript">
document.getElementById('btn')
.addEventListener('click',
function () {
alert('Button Clicked!');
})
</script>
</body>
</html>
Producción:
Se llamará al método addEventListener() durante la fase de burbujeo . El código que se muestra arriba usará addEventListener() con dos argumentos. Sin embargo, en el código anterior, se puede llamar a .addEventListener() con el tercer argumento como «verdadero», lo que invocará al oyente antes durante la fase de captura.
Ejemplo:
html
<DOCTYPE html>
<html>
<body id="bdy">
<div id="container">
<button id="btn">Click Me!</button>
</div>
<script type="text/javascript">
document.getElementById('bdy')
.addEventListener('click', function () {
alert('Body!');
})
document.getElementById('container')
.addEventListener('click', function () {
alert('Div!');
}, true)
document.getElementById('btn')
.addEventListener('click', function () {
alert('Button!');
})
</script>
</body>
</html>
Producción:
En el código anterior, el cuerpo y el botón están en la fase burbujeante (predeterminada) mientras que div está configurado en la fase de captura. Cuando se hace clic en un botón , comienza de nuevo en la parte superior. Cuando se trata del elemento del cuerpo , no ejecuta la función porque todavía estamos en la fase de captura. Pero cuando llega a div , ejecuta la función porque el tercer parámetro de addEventListener() es «verdadero». Así que tiene que ejecutarse en la fase de captura. Cuando llega al botón, cambia de la fase de captura a la fase de destino y, por último, a la fase de burbujeo. Activa el addEventListener que está en modo predeterminado.
Entonces, el código anterior mostrará un cuadro de mensaje de alerta que muestra «div», luego «botón» y, por último, «cuerpo».
Publicación traducida automáticamente
Artículo escrito por NANDINIJAIN y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA