Para que serve o falso no final? Obrigado.
window.addEventListener('load', function() {
alert("All done");
}, false);
Para que serve o falso no final? Obrigado.
window.addEventListener('load', function() {
alert("All done");
}, false);
Respostas:
Verifiquei o MDN também, mas ainda não entendi para que useCaptureera, então esta resposta é para aqueles que ainda não entenderam depois de verificar a documentação oficial.
Em primeiro lugar, o seguinte acontece em quase todos os navegadores:
Em todos os navegadores, exceto IE <9, há dois estágios de processamento de eventos.
O evento primeiro desce - isso é chamado de captura , e então surge . Esse comportamento é padronizado na especificação W3C.
o que significa que não importa como você defina o useCapture, essas duas fases de evento sempre existem.
Esta imagem mostra como funciona.

De acordo com este modelo, o evento:
Capturas para baixo - a 1 -> 2 -> 3.
Borbulha para cima - através de 3 -> 2 -> 1.
Então vem sua pergunta. O terceiro parâmetro chamado useCaptureindica em qual das duas fases você deseja que seu manipulador trate o evento.
useCapture = trueO manipulador está definido na fase de captura. Os eventos chegarão a ele antes de chegar a seus filhos.
useCapture = false.O manipulador é definido na fase de borbulhamento. Os eventos chegarão a ele depois de chegar a seus filhos.
o que significa que se você escrever um código como este:
child.addEventListener("click", second);
parent.addEventListener("click", first, true);
ao clicar no elemento filho, o firstmétodo será chamado antes second.
Por padrão, o useCapturesinalizador é definido como falso, o que significa que seu manipulador só será chamado durante a fase de bolha de evento .
Para obter informações detalhadas, clique neste link de referência e neste .
De acordo com MDN Web Docs , o terceiro parâmetro é:
useCapture
Iftrue,useCaptureindica que o usuário deseja iniciar a captura. Depois de iniciar a captura, todos os eventos do tipo especificado serão despachados para o registradolistenerantes de serem despachados para qualquerEventTargets abaixo dele na árvore DOM. Os eventos que estão subindo pela árvore não irão acionar um ouvinte designado para usar a captura. Consulte Eventos DOM Nível 3 para obter uma explicação detalhada.
A resposta de @Libra é muito boa, só acontece de algumas pessoas como eu que entendem melhor a interação do código com a máquina.
Portanto, o script a seguir deve explicar a propagação do evento. O que estou tentando fazer com base neste esquema de descrição é:
Seguir o fluxo de eventos para baixo e para cima na seguinte hierarquia:
<window>
<document>
<body>
<section>
<div>
<paragraph>
<span>
Para simplificar, começaremos no corpo até o elemento span, registrando manipuladores para a fase de captura, e de volta até o elemento body, registrando manipuladores para a fase de bolhas. Portanto, o resultado seria nó por nó a direção tomada pelo evento do início ao fim. Clique em "Mostrar console" no painel direito do snippet para acessar os registros
function handler(e){
/* logs messages of each phase of the event flow associated with
the actual node where the flow was passing by */
if ( e.eventPhase == Event.CAPTURING_PHASE ){
console.log ("capturing phase :\n actual node : "+this.nodeName);
}
if ( e.eventPhase == Event.AT_TARGET){
console.log( "at target phase :\n actual node : "+this.nodeName);
}
if ( e.eventPhase == Event.BUBBLING_PHASE){
console.log ("bubbling phase :\n actual node : "+this.nodeName );
}
}
/* The following array contains the elements between the target (span and you can
click also on the paragraph) and its ancestors up to the BODY element, it can still
go up to the "document" then the "window" element, for the sake of simplicity it is
chosen to stop here at the body element
*/
arr=[document.body,document.getElementById("sectionID"),
document.getElementById("DivId"),document.getElementById("PId"),
document.getElementById("spanId")];
/* Then trying to register handelers for both capturing and bubbling phases
*/
function listener(node){
node.addEventListener( ev, handler, bool )
/* ev :event (click), handler : logging the event associated with
the target, bool: capturing/bubbling phase */
}
ev="click";
bool=true; // Capturing phase
arr.forEach(listener);
bool=false; // Bubbling phase
/* Notice that both capturing and bubbling
include the at_target phase, that's why you'll get two `at_target` phases in
the log */
arr.forEach(listener);
p {
background: gray;
color:white;
padding: 10px;
margin: 5px;
border: thin solid black
}
span {
background: white;
color: black;
padding: 2px;
cursor: default;
}
<section ID="sectionID">
<div id="DivId">
<p id="PId">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis <span id="spanId">CLICK ME </span> imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosq.
</p>
</div>
</section>
Observe que eventos como o foco não borbulham, o que faz sentido ainda que a maioria dos eventos borbulhe.