En la operación DOM de JavaScript, definitivamente encontrará eventos burbujeantes de JS. El más común es el evento emergente Div como se muestra en la figura
Al hacer clic en la parte gris, la ventana emergente desaparece y hacer clic en la parte negra no tiene ningún efecto.
Use el siguiente código para analizar el evento burbujeante de JS
Código HTML:
La copia del código es la siguiente:
<! Doctype html>
<html lang = "en">
<Evista>
<meta charset = "utf-8">
<title> JS Bubbling Event </title>
<link rel = "stylesheet" href = "style.css">
</ablo>
<Body>
<div>
<h1> JS Análisis de eventos de burbujas </h1>
<hr>
<div>
<botón>
¡Haz clic en mí!
</botón>
</div>
</div>
<script>
var box = document.Queryselector (". Box"),
btn = document.QuerySelector (". Btn");
box.OnClick = function (evento) {
alerta ("Soy div");
}
btn.onclick = function (evento) {
alerta ("I Am Button");
}
</script>
</body>
</html>
Usando la herramienta de desarrollador predeterminada del navegador Firefox, la vista 3D puede ver claramente el orden de la capa DIV
Ilustración:
Al hacer clic en el botón, aparecerá "I Am A Botton" y aparecerá "I Am a Div", porque el evento del botón se activará primero y luego se activará la siguiente capa de evento Div Click.
La activación de los eventos es el principio en primer lugar.
Ilustración:
Entonces, a veces no queremos que múltiples eventos activen conflictos, por lo que el evento tiene una stopPropagation (); método para prevenir burbujas.
También hay un método de evento que también se usa comúnmente, como un enlace. Cuando hago clic en el enlace, no quiero saltar, así que uso el evento.PreventDefault (); método
El código de ejemplo es el siguiente
La copia del código es la siguiente:
<! Doctype html>
<html lang = "en">
<Evista>
<meta charset = "utf-8">
<title> JS Bubbling Event </title>
<link rel = "stylesheet" href = "style.css">
</ablo>
<Body>
<div>
<h1> JS Análisis de eventos de burbujas </h1>
<hr>
<div>
<botón>
¡Haz clic en mí!
</botón>
<a href = "http://www.liteng.org" id = "enlace"> Soy el enlace </a>
</div>
</div>
<script>
var box = document.Queryselector (". Box"),
btn = document.QuerySelector (". Btn");
box.OnClick = function (evento) {
alerta ("Soy div");
}
btn.onclick = function (evento) {
alerta ("I Am Button");
event.stopPropagation ();
}
document.getElementById ('link'). onClick = function (event) {
alerta ("I Am Link");
event.preventDefault ();
}
/*Distinguir entre event.stopPropagation (); y event.preventDefault ();
El primero usa el método StopPropagation () para evitar que los eventos burbujeen.
Este último es bloquear el comportamiento predeterminado, como bloquear los hipervínculos
*/
</script>
</body>
</html>
¿Puedes entender completamente el incidente burbujeante de JS? Si tiene alguna pregunta, por favor déjame un mensaje