Autor: Eduardo Oviedo Blanco
Para usar este taller efectivamente, clone el código en su ambiente local.
git clone https://github.com/edWAR6/JavaScript-Bubbling-and-Capturing-Workshop.git
Si desea subir el taller en su repositorio personal. Cree un repositorio en su perfil, luego:
git remote set-url origin https://github.com/<tu usuario>/JavaScript-Bubbling-and-Capturing-Workshop.git
El nombre del repositorio puede cambiar. Siga las instrucciones y guarde sus cambios.
Este básico taller demuestra event bubbling y event capturing en JavaScript.
-
Primero ejecute el sitio web e intente hacer click en el video para iniciarlo.
-
Note como no solo se inicia el video, si no que también se cierra el div.
-
Para corregir el defecto es necesario detener el efecto bubbling.
video.onclick = function(e) {
e.stopPropagation();
video.play();
};-
Ejecute ahora el sitio y vea como ahora el evento click no activa el otro evento click del div que lo contiene.
-
Experimento con el código e intente hacer uso de
e.stopPropagation();en lugar de la propiedad onClick.
El efecto del event bubbling y event capturing pueden causar problemas, pero también puede ser usado de manera beneficiosa.