¿Para qué es lo falso al final? Gracias.
window.addEventListener('load', function() {
alert("All done");
}, false);
javascript
0x499602D2
fuente
fuente
También revisé MDN, pero todavía no entendía para qué
useCaptureera, por lo que esta respuesta es para aquellos que aún no la obtienen después de haber verificado la documentación oficial.Entonces, en primer lugar, ocurre lo siguiente en casi todos los navegadores:
lo que significa que no importa lo que establezca
useCapture, estas dos fases del evento siempre existen.Esta imagen muestra cómo funciona.
Luego viene tu pregunta. El tercer parámetro llamado
useCaptureindica en cuál de las dos fases desea que su controlador maneje el evento.lo que significa que si escribe código como este:
child.addEventListener("click", second); parent.addEventListener("click", first, true);al hacer clic en el elemento hijo, el
firstmétodo se llamará antessecond.De forma predeterminada, el
useCaptureindicador se establece en falso, lo que significa que su controlador solo será llamado durante la fase de propagación del evento .Para obtener información detallada, haga clic en este enlace de referencia y esto .
fuente
La respuesta de @Libra es muy buena, simplemente hay algunas personas como yo que entienden mejor la interacción del código con la máquina.
Entonces, el siguiente script debería explicar la propagación del evento. Lo que estoy tratando de hacer basado en este esquema de descripción es: El
siguiente evento fluye hacia abajo y hacia arriba en la siguiente jerarquía:
<window> <document> <body> <section> <div> <paragraph> <span>En aras de la simplicidad, comenzaremos en el cuerpo hasta el elemento span que registra los controladores para la fase de captura, y regresaremos al elemento del cuerpo que registra los controladores para la fase de burbujeo. Entonces, el resultado sería nodo por nodo la dirección tomada por el evento desde el principio hasta el final. Haga clic en "Mostrar consola" en el panel derecho del fragmento para acceder a los 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>Tenga en cuenta que los eventos como el enfoque no burbujean, lo que hace que la mayoría de los eventos sí burbujeen.
fuente