40
¿Cuál es el falso para al final? Gracias.¿Por qué se usa 'falso' después de esta función simple addEventListener?
window.addEventListener('load', function() {
alert("All done");
}, false);
A
Respuesta
10
Según MDC, el tercer parámetro es:
useCapture
Sitrue,useCaptureindica que el usuario desea iniciar captura. Después de iniciar la captura , todos los acontecimientos de la especificada tipo serán enviados a la registradalistenerantes de ser enviado a cualquierEventTargets por debajo en el árbol DOM. Los eventos que son burbujeando hacia arriba a través del árbol no dispararán un oyente designado a captura de uso. Ver DOM Level 3 Events para una explicación detallada.
-6
Determina si se captura el evento.
Más información here
178
he comprobado MDN también, pero todavía no entendía lo que el useCapture era para, por lo que esta respuesta es para los que todavía no lo consigue después de haber comprobado la documentación oficial.
Así que en primer lugar, ocurre lo siguiente en casi todos los navegadores:
En todos los navegadores, excepto IE < 9, hay dos etapas de procesamiento de eventos.
El evento va primero hacia abajo - que se llama captura, y luego burbujas hasta. Este comportamiento está estandarizado en la especificación W3C.
lo que significa que independientemente de lo que establezca el useCapture, estas dos fases de evento siempre existen.
Esta imagen muestra cómo funciona.
Según este modelo, el evento:
Captura abajo - a través de 1 -> 2 -> 3.
Bubbles arriba - a través de 3 -> 2 -> 1
Luego viene su pregunta. El 3er parámetro llamado useCapture indica en cuál de las dos fases desea que su manejador maneje el evento.
useCapture = trueEl controlador se encuentra en la fase de captura. Los eventos llegarán antes de llegar a sus hijos.
useCapture = false.El controlador está configurado en la fase de burbujeo. Los eventos llegarán después de llegar a sus hijos.
lo que significa que si se escribe código como este:
child.addEventListener("click", second);
parent.addEventListener("click", first, true);
al hacer clic elemento secundario, first método será llamado antes second.
Por defecto, la bandera useCapture se establece en falsa que significa controlador sólo se llamará durante el evento burbujeante fase.
Para obtener información detallada, click this reference link y this.
+7
Muy buena y completa respuesta. Lo entiendo mucho mejor que ahora. – 0x499602D2
+10
Muy buena explicación. El toque humano, eso es lo que hace la diferencia. –
+1
Realmente aprecio esta explicación. – neilsimp1
1
@ 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.
Así que la siguiente secuencia de comandos debería estar explicando la propagación del evento. Lo que estoy tratando de hacer sobre la base de este description schema es:
Siguiendo evento fluya hacia abajo y hasta la siguiente jerarquía:
<window>
<document>
<body>
<section>
<div>
<paragraph>
<span>
En aras de la simplicidad vamos a empezar en el cuerpo hasta el elemento span registro manipuladores para la fase de captura y retroceden hasta el elemento del cuerpo que registra los manejadores 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. Por favor, haga clic en "Mostrar consola" en el panel derecho del fragmento a 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>Aviso que los eventos tales como el enfoque no burbujean, lo que hace que todavía sens mayoría de los eventos hacer burbujas.
Cuestiones relacionadas
- 1. Función de intercambio simple ... ¿por qué esta no se intercambia?
- 2. ¿Por qué se usa "cuándo" en esta función?
- 3. ¿Por qué esta declaración IF devuelve falso?
- 4. ¿Por qué esta función javascript se ejecuta sin ser llamada?
- 5. ¿Por qué se usa suhosin?
- 6. ¿Por qué esta simple consulta de MySQL es tan lenta?
- 7. ¿Esta función usa recursividad de cola?
- 8. ¿Qué es LiteralControl? ¿Por qué se usa?
- 9. ¿por qué esta función no devuelve decimal?
- 10. ¿Por qué esta simple secuencia de comandos php pierde memoria?
- 11. ¿por qué se usa osgi?
- 12. ¿Qué significa "esta función se fusionará"?
- 13. ModelState.IsValid == falso, ¿por qué?
- 14. ¿Por qué md5 todavía se usa ampliamente?
- 15. ¿Por qué obtengo ninguna función coincidente cuando heredo esta función
- 16. ¿Qué hace esta función?
- 17. PostgreSQL: ¿Por qué esta simple consulta no utiliza el índice?
- 18. ¿Por qué esta aplicación Qt simple no vincula
- 19. ¿Por qué se usa console.log? ¿Qué hace?
- 20. io_service, ¿por qué y cómo se usa?
- 21. ¿Por qué isNaN (123.) Devuelve falso?
- 22. ¿por qué esta condición es verdadera?
- 23. ¿Por qué es falso ProgressEvent.lengthComputable?
- 24. ¿Por qué se usa NSUserDefaults en iOS?
- 25. ¿Por qué se usa 1103515245 en rand?
- 26. ¿Por qué esta función de tiempo mide siempre 0 ms?
- 27. ¿Qué está haciendo esta función de Ruby?
- 28. números de fibonacci, ¿por qué funciona esta función recurrente?
- 29. ¿Por qué no se usa clang más?
- 30. Javascript: ¿Por qué si (falso)?
No sé tanto sobre JavaScript, así que estoy teniendo problemas para obtener esta respuesta. En realidad, no sé qué es useCapture? ¿Podrías decirme algo al respecto? –
@BikashChandraMondal echa un vistazo a la respuesta a continuación. – libra
Por favor explique, no solo copie/pegue. –