Terminologia
Do quirksmode.org :
Captura de eventos
Quando você usa a captura de eventos
| |
--------------- | | -----------------
| element1 | | |
| ----------- | ----------- |
| | element2 \ / | |
| ------------------------- |
| Evento CAPTURANDO |
-----------------------------------
o manipulador de eventos do elemento1 é acionado primeiro, o manipulador de eventos do elemento2 é acionado por último.
Evento borbulhante
Quando você usa bolhas de eventos
/ \
--------------- | | -----------------
| element1 | | |
| ----------- | ----------- |
| | element2 | | | |
| ------------------------- |
| Evento BUBBLING |
-----------------------------------
o manipulador de eventos do elemento2 é acionado primeiro, o manipulador de eventos do elemento1 é acionado por último.
Qualquer evento ocorrendo no modelo de evento W3C é capturado primeiro até atingir o elemento de destino e depois borbulha novamente .
| | / \
----------------- | | - | | -----------------
| element1 | | | | |
| ------------- | | - | | ----------- |
| | element2 \ / | | | |
| -------------------------------- |
| Modelo de evento W3C |
------------------------------------------
Interface
Do w3.org , para captura de eventos :
Se a captura EventListener
desejar impedir o processamento adicional do evento, ele poderá chamar o stopPropagation
método da
Event
interface. Isso impedirá o envio adicional do evento, embora outros EventListeners
registros registrados no mesmo nível de hierarquia ainda recebam o evento. Depois que o stopPropagation
método de um evento é chamado, outras chamadas para esse método não têm efeito adicional. Se nenhum capturador adicional existir e
stopPropagation
não tiver sido chamado, o evento acionará o apropriado EventListeners
no próprio destino.
Para o evento borbulhante :
Qualquer manipulador de eventos pode optar por impedir a propagação de eventos adicionais chamando o stopPropagation
método da Event
interface. Se alguém
EventListener
chamar esse método, todos os adicionais EventListeners
na corrente EventTarget
serão acionados, mas a bolha cessará nesse nível. stopPropagation
É necessária apenas uma chamada para evitar mais bolhas.
Para cancelamento de evento :
Cancelamento é feito chamando o Event
's preventDefault
método. Se uma ou mais EventListeners
chamadas preventDefault
durante qualquer fase do fluxo de eventos, a ação padrão será cancelada.
Exemplos
Nos exemplos a seguir, um clique no hiperlink no navegador da Web dispara o fluxo do evento (os ouvintes de eventos são executados) e a ação padrão do destino do evento (uma nova guia é aberta).
HTML:
<div id="a">
<a id="b" href="http://www.google.com/" target="_blank">Google</a>
</div>
<p id="c"></p>
JavaScript:
var el = document.getElementById("c");
function capturingOnClick1(ev) {
el.innerHTML += "DIV event capture<br>";
}
function capturingOnClick2(ev) {
el.innerHTML += "A event capture<br>";
}
function bubblingOnClick1(ev) {
el.innerHTML += "DIV event bubbling<br>";
}
function bubblingOnClick2(ev) {
el.innerHTML += "A event bubbling<br>";
}
// The 3rd parameter useCapture makes the event listener capturing (false by default)
document.getElementById("a").addEventListener("click", capturingOnClick1, true);
document.getElementById("b").addEventListener("click", capturingOnClick2, true);
document.getElementById("a").addEventListener("click", bubblingOnClick1, false);
document.getElementById("b").addEventListener("click", bubblingOnClick2, false);
Exemplo 1 : resulta na saída
DIV event capture
A event capture
A event bubbling
DIV event bubbling
Exemplo 2 : adicionando stopPropagation()
à função
function capturingOnClick1(ev) {
el.innerHTML += "DIV event capture<br>";
ev.stopPropagation();
}
resulta na saída
DIV event capture
O ouvinte de eventos impediu a propagação descendente e ascendente do evento. No entanto, isso não impediu a ação padrão (uma nova guia é aberta).
Exemplo 3 : adicionando stopPropagation()
à função
function capturingOnClick2(ev) {
el.innerHTML += "A event capture<br>";
ev.stopPropagation();
}
ou a função
function bubblingOnClick2(ev) {
el.innerHTML += "A event bubbling<br>";
ev.stopPropagation();
}
resulta na saída
DIV event capture
A event capture
A event bubbling
Isso ocorre porque os dois ouvintes de eventos são registrados no mesmo destino de evento. Os ouvintes do evento impediram a propagação para cima do evento. No entanto, eles não impediram a ação padrão (uma nova guia é aberta).
Exemplo 4 : adicionando preventDefault()
a qualquer função, por exemplo
function capturingOnClick1(ev) {
el.innerHTML += "DIV event capture<br>";
ev.preventDefault();
}
impede que uma nova guia seja aberta.
event.stop
funções ... Também estranho, nunca tive problemas com isso. Eu uso muito borbulhando. Obrigado pelo exemplo!