English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
A propagação de eventos é uma maneira de descrever a " pilha " de eventos acionada no navegador Web.
eventoPropagaçãoeCapturasão dois mecanismos de propagação de eventos, que descrevem o que acontece quando dois manipuladores de eventos do mesmo tipo são ativados em um elemento.
supondo que você esteja<div >elemento internamente há um<p>elemento, e o usuário clicou<p>elemento, você deve primeiro lidar do evento de "click" do qual elemento?
<div id="div1">Capturando
<p id="p1">Clique me</p>
</div>
<script>
document.querySelector("#div1).addEventListener("click", myFunc, true);
document.querySelector("#p"1).addEventListener("click", myFunc, true);
</script>Teste veja‹/›através decapture(captura), o evento é capturado primeiro pelo elemento mais externo e então propagado para os elementos internos.
através dePropagação, o evento é capturado e tratado primeiro pelo elemento mais interno e então propagado para os elementos externos.
usando oaddEventListener()Método, você pode usar " useCapture O parâmetro especifica o tipo de propagação, a seguir, a sintaxe detalha o uso de useCapture.
element.addEventListener(event, listener, useCapture)
"useCapture" tem valor padrão false, o que significa que será usado a propagação de bolha; enquanto o valor é configurado para true, o evento usará a propagação de captura.
A introdução do conceito de propagação de eventos é para lidar com a situação em que vários elementos com relação pai-filho na hierarquia DOM têm manipuladores de eventos para o mesmo evento (por exemplo, clique do mouse). O problema agora é qual evento de clique será tratado primeiro quando o usuário clicar no elemento interno, seja o elemento externo ou o interno.
Quando um evento é acionado em um elemento com elementos pais (por exemplo, neste exemplo<p>), o navegador executará dois estágios diferentes-Estágio de captura e propagação
NoCapturaEstágio:
O navegador verificará o elemento pai mais externo (<html>se o manipulador de evento onclick foi registrado no estágio de captura, caso seja, executa o manipulador de evento.
Então, ele se move para<html>nopróximo elemento e executa a mesma operação, em seguida, executa o próximo, e assim por diante, até que
NoPropagaçãoEstágio, exatamente o contrário:
O navegador verifica se o elemento clicado realmente no estágio de propagação tem um manipulador de evento onclick registrado, se tiver, executa o manipulador de evento.
Então, ele se move para o próximo elemento pai direto e executa o próximo, e assim por diante, até que<html>até o elemento.
Nos navegadores populares, por padrão, todos os manipuladores de eventos estão registrados no estágio de propagação.
No estágio de captura, o evento se propaga do Window para baixo pela árvore DOM até o nó alvo.
document.querySelector("div").addEventListener("click", myFunc, true);
document.querySelector("p").addEventListener("click", myFunc, true);
document.querySelector("a").addEventListener("click", myFunc, true);Teste veja‹/›Apenas quandoaddEventListener()O terceiro parâmetro é configurado como true para que a captura de eventos seja usada juntamente com os tratadores de eventos registrados.
Na fase de bolha, exatamente o contrário. Nesta fase, o evento é propagado ou bolhado, da origem do evento até a Window, propagando para cima na árvore DOM.
document.querySelector("div").addEventListener("click", myFunc);
document.querySelector("p").addEventListener("click", myFunc);
document.querySelector("a").addEventListener("click", myFunc);Teste veja‹/›Todos os navegadores suportam a propagação de eventos e a propagação de eventos é aplicável a todos os tratadores, independentemente de como eles forem registrados (por exemplo, usando onclick ou addEventListener()).
Se você quiser evitar que qualquer programa de tratamento de eventos dos ancestral seja notificado usando o método event.stopPropagation(), também pode parar a propagação do evento no meio.
Neste exemplo, se clicar em um elemento filho, o listener de evento click do elemento pai não será executado:
document.querySelector("div").addEventListener("click", myFunc);
document.querySelector("p").addEventListener("click", myFunc);
document.querySelector("a").addEventListener("click", myFunc);
function myFunc() {
alert("Você clicou: ");+ this.tagName);
event.stopPropagation();
}Teste veja‹/›O elemento alvo é o nó DOM que gerou o evento.
Por exemplo, se o usuário clicar em um hiperlink, o elemento alvo é o hiperlink.
O acesso ao elemento alvo é através de event.target, que não muda durante a fase de propagação do evento.
document.querySelector("div").addEventListener("click", myFunc);
document.querySelector("p").addEventListener("click", myFunc);
document.querySelector("a").addEventListener("click", myFunc);
function myFunc() {
alert("target = "); + event.target.tagName);
}Teste veja‹/›Alguns eventos têm ações padrão associadas a eles. Por exemplo, se você clicar em um link, o navegador o levará ao destino do link, quando você clicar no botão de envio de um formulário, o navegador enviará o formulário, etc. Você pode usar o método event.preventDefault() do objeto evento para evitar essas ações padrão.
function myFunc() {
event.preventDefault();
}Teste veja‹/›Mas, evitar a ação padrão não impede a propagação do evento; o evento continua a ser propagado conforme o costume para a árvore DOM.
Bubbling nos permite aproveitar a delegação de eventos.
A delegação de eventos permite que você evite adicionar ouvintes de evento a nós específicos; em vez disso, você adiciona ouvintes de evento a um objeto pai.
Este conceito é baseado no seguinte fato: Se você deseja executar algum código ao clicar em qualquer um dos elementos filhos em uma quantidade grande de elementos, você pode configurar o ouvinte de evento no elemento pai e fazer com que o evento bubbling ocorra no elemento pai, sem precisar configurar o ouvinte de evento para cada filho separadamente.
Neste exemplo, se você quiser exibir uma mensagem ao clicar, você pode configurar o ouvinte de evento de clique no elemento pai<ul>Configurar o ouvinte de evento de clique, ele exibirá o item da lista
<ul id="parent-list">
<li id="post-1">Item 1</li>
<li id="post-2">Item 2</li>
<li id="post-3">Item 3</li>
<li id="post-4">Item 4</li>
<li id="post-5">Item 5</li>
<li id="post-6">Item 6</li>
</ul>
<script>
document.getElementById("parent-list").addEventListener("click", function(event) {
if(event.target && event.target.nodeName == "LI") {
alert("Item da lista " + event.target.id.replace("post-", "") + " foi clicado!");
}
});
</script>Teste veja‹/›