I listener di eventi registrati per la fase di acquisizione non attivati prima delle bolle - perché?

Sto cercando di capire cosa determina l'ordine in cui i gestori di eventi vengono attivati quando si fa clic su un nidificato <div> - quello che sto vedendo sembra essere in disaccordo con il comportamento documentato quindi sto cercando un piccolo aiuto per capirlo.I listener di eventi registrati per la fase di acquisizione non attivati prima delle bolle - perché?

ho 2 div annidati, e ho 2 gestori di eventi legati a ciascuna, una per la fase di cattura, e una per la fase di bubbling:

<html> 
    <head> 
     <script> 
      function setup(){ 
       var outer = document.getElementById('outer'); 
       outer.addEventListener('click', function(){console.log('outer false');}, false); 
       outer.addEventListener('click', function(){console.log('outer true');}, true); 

       var inner = document.getElementById('inner'); 
       inner.addEventListener('click', function(){console.log('inner false');}, false); 
       inner.addEventListener('click', function(){console.log('inner true');}, true); 
      }   
     </script> 
     <style> 
      div { 
       border: 1px solid; 
       padding: 1em; 
      } 
     </style> 
    </head> 
    <body onload="setup()"> 
     <div id="outer"> 
      <div id="inner"> 
       CLICK 
      </div> 
     </div> 
    </body> 
</html>

Secondo what I have read l'uscita dovrebbe essere:

outer true 
inner true 
inner false 
outer false

ma quello che ho fatto vedere (su Chrome e Firefox) è:

outer true 
inner false 
inner true 
outer false

Qualcuno può spiegare la discrepanza?

fonte

2012-08-07 codebox

Le specifiche del flusso di eventi W3C (vale a dire ciò che Chrome e Firefox implementano) sono che tutti gli eventi vengono prima catturati fino a quando raggiungono l'elemento di destinazione, a quel punto essi diventano nuovamente visibili. Tuttavia, quando il flusso di eventi raggiunge il target dell'evento stesso, l'evento non è più catturante o bubbling - è sul target stesso. Poiché il bubbling/capture non è applicabile, i gestori di eventi attivano l'ordine in cui sono registrati. Prova a scambiare l'ordine dei gestori di eventi dell'elemento interno, scoprirai che cambia anche l'ordine dell'output della console.

jsFiddle esempio: http://jsfiddle.net/RTfwd/1/

Più recenti revisioni della DOM Event spec rendere questo punto più chiaro (http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html):

gorgogliare fase Il processo mediante il quale un evento può essere gestito da uno degli antenati del target dopo il gestito dal target dell'evento. Vedi la descrizione della fase della bolla nel contesto del flusso di eventi per maggiori dettagli.

fase di cattura Il processo mediante il quale un evento può essere gestito da una delle antenati del bersaglio prima gestita dal destinatario dell'evento. Vedi la descrizione della fase di cattura nel contesto del flusso di eventi per maggiori dettagli.

fonte

2012-08-07 07:48:09

Quindi la mia comprensione è che l'acquisizione dovrebbe avvenire prima che il gorgogliare su tutti gli elementi (tra cui interno), ma che non è quello che sto vedendo - sul interiore gorgogliante (false) avviene prima della cattura (vero) – codebox

Quando si aggiungi un gestore di eventi all'evento target stesso, bubble vs capture non è applicabile. A quel livello, non stai catturando o borbottando: sei sull'obiettivo stesso. I gestori eventi attivano l'ordine in cui sono stati registrati. Le versioni più recenti delle specifiche sono più chiare su questo punto: dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html (Ctrl + F -> fase di bubbling) –

@ElliotB ., Quindi come lo registriamo nella fase di acquisizione? è possibile? – Pacerier

I listener di eventi registrati per la fase di acquisizione non attivati ​​prima delle bolle - perché?

risposta

Problemi correlati

I listener di eventi registrati per la fase di acquisizione non attivati prima delle bolle - perché?