Na operação JavaScript DOM, você definitivamente encontrará eventos de borbulhamento JS. O mais comum é o evento pop-up da div, como mostrado na figura
Ao clicar na parte cinza, a janela pop-up desaparece e clicar na parte preta não tem efeito.
Use o código a seguir para analisar o evento borbulhante de JS
Código HTML:
A cópia do código é a seguinte:
<! Doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title> JS Bubbling Event </title>
<link rel = "Stylesheet" href = "style.css">
</head>
<Body>
<div>
ANÁLISE DE EVENTO DE CHUMA JS </H1>
<HR>
<div>
<butter>
Clique em mim!
</button>
</div>
</div>
<Cript>
var box = document.QuerySelector (". Box"),
btn = document.QuerySelector (". btn");
box.OnClick = function (evento) {
alerta ("eu sou div");
}
btn.OnClick = function (Event) {
alerta ("eu sou botão");
}
</script>
</body>
</html>
Usando a ferramenta de desenvolvedor padrão do navegador Firefox, a visualização 3D pode ver claramente a ordem da camada div
Ilustração:
Ao clicar no botão, "Eu sou um botão" aparecerá e "I Am a Div" será exibido, porque o evento do botão será acionado primeiro e, em seguida, a próxima camada do evento Div Click será acionada.
O desencadeamento dos eventos é o primeiro princípio da primeira saída.
Ilustração:
Às vezes, não queremos que vários eventos desencadeem conflitos, portanto, o evento tem uma StopPropagation (); método para prevenir bolhas.
Há também um método de evento que também é comumente usado, como um link. Quando clico no link, não quero pular, então uso o evento.preventDefault (); método
O código de exemplo é o seguinte
A cópia do código é a seguinte:
<! Doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title> JS Bubbling Event </title>
<link rel = "Stylesheet" href = "style.css">
</head>
<Body>
<div>
ANÁLISE DE EVENTO DE CHUMA JS </H1>
<HR>
<div>
<butter>
Clique em mim!
</button>
<a href = "http://www.liteng.org" id = "link"> eu sou o link </a>
</div>
</div>
<Cript>
var box = document.QuerySelector (". Box"),
btn = document.QuerySelector (". btn");
box.OnClick = function (evento) {
alerta ("eu sou div");
}
btn.OnClick = function (Event) {
alerta ("eu sou botão");
event.stopPropagation ();
}
document.getElementById ('link'). OnClick = function (Event) {
alerta ("eu sou link");
event.preventDefault ();
}
/*Distinguir entre event.stoppropagation (); e event.preventDefault ();
O primeiro usa o método StopPropagation () para impedir que os eventos borbulhassem.
O último é bloquear o comportamento padrão, como bloquear hiperlinks
*/
</script>
</body>
</html>
Você consegue entender completamente o incidente borbulhante de JS? Se você tiver alguma dúvida, deixe -me uma mensagem