Eventi Jquery .bind attivati durante l'acquisizione di eventi o il fumetto di eventi

Tutti, so che nel modello di eventi di livello 2 di Dom, esiste una bolla di eventi e di eventi. ma non riesco proprio a capire come jquery trattare con loro. Così ho fatto qualche esperimento con il metodo .bind. questo è il mio codice. Per favore rivederlo.Eventi Jquery .bind attivati durante l'acquisizione di eventi o il fumetto di eventi

<script> 
    $(function() { 
     $('*').each(function(){ 
      var current = this; 
      $(this).bind("dblclick",function(event){console.log('Capture for ' + current.tagName + '#'+ current.id + 
        ' target is ' + event.target.id);}); 

     }); 
    }); 
</script> 
<body id="greatgrandpa"> 
    <div id="grandpa"> 
     <div id="pops"> 
      <img id="example" src="designer/templates/thumbnails/2ColsTemplate.PNG" /> 
     </div> 
    </div> 
</body>

l'uscita si presenta come di seguito

Capture for IMG#example target is example 
Capture for DIV#pops target is example 
Capture for DIV#grandpa target is example 
Capture for BODY#greatgrandpa target is example 
Capture for HTML# target is example

Quando uso il event.stopPropagation(); il gestore di eventi si fermerà bolla l'evento dblclick.

Ma ho 2 domande per questo. In base all'ordine di scrittura dei registri, ho indovinato che il metodo bind ha attivato l'evento nel fumetto degli eventi (dal basso verso l'alto di dom) non nella condizione di evento (dalla parte superiore della finestra in basso). Un'altra domanda è c'è qualche possibilità di far scattare l'evento nel periodo di cattura dell'evento? Grazie.

grazie.

fonte

2013-03-18 Joe.wang

jQuery supporta solo la fase di bubbling degli eventi, non la fase di acquisizione degli eventi, anche perché per molto tempo, IE non supportava l'acquisizione. Quello che ti sta mostrando il codice è gorgogliante, non acquisizione.

Cattura passa da document all'elemento in cui si è verificato l'evento; poi inizia a gorgogliare l'elemento e bolle nuovamente allo document, motivo per cui vedi gli eventi nell'ordine che hai mostrato (che è la fase di bubbling).

fonte

2013-03-18 08:23:14

Sì, come possiamo vedere nei registri. è bubbing. dal basso verso l'alto. grazie. –

ok. Capito . jquery supporta solo l'evento che bolle. Grazie alla tua buona risposta. –

[IE9 e versioni successive supportano l'acquisizione degli eventi] (https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.removeEventListener#Browser_Compatibility). – Barney

La risposta precedente è corretta. Tuttavia c'è una soluzione semplice. Per ottenere lo stesso risultato efficace, è possibile interrompere la propagazione per terminare il bubbling dell'evento, attivare l'evento sul genitore della destinazione e quindi eseguire il codice desiderato in modo che si verifichi in seguito agli eventi sugli oggetti padre.

per il vostro esempio se si desidera effettivamente invertire l'esecuzione dei gestori:

$('*').each(function(){ 
     var current = this; 
     $(this).bind("dblclick",function(event){ 

       // stop the event propagation 
       event.stopPropagation(); 

       // execute allow the event to be executed on parent objects 
       var parent = $(event.target).parent(); 
       if(parent) { 
        parent.dblclick(); 
       } 


       console.log('Capture for ' + current.tagName + '#'+ current.id + 
       ' target is ' + event.target.id);}); 

    });

Uno svantaggio per questa metodologia è se c'è un elemento padre è stato definito ad un gestore di eventi di cattura, la cattura avrà già verificato e chiamando l'evento sul genitore farà ri-eseguire il gestore di cattura. Quindi questo dovrebbe essere usato solo quando si è a conoscenza o si controllano gli eventi dichiarati su tutti gli elementi dei genitori verso il bersaglio.

fonte

2014-07-25 16:34:32

Eventi Jquery .bind attivati ​​durante l'acquisizione di eventi o il fumetto di eventi

risposta

Problemi correlati

Eventi Jquery .bind attivati durante l'acquisizione di eventi o il fumetto di eventi