YUI3 Onclick gestione per i collegamenti avere stesse classi

Question

edizione dell'evento. Quando clicco su uno dei link ci sono alcune azioni differenti da intraprendere in base al clic su quale link è stato cliccato, ad es.

<a href="?page=1" data="test1" class="sample">One</a> 
<a href="?page=2" data="test2" class="sample">two</a> 
<a href="?page=3" data="test3" class="sample">three</a> 

codice del gestore:

Y.all('.sample').on('click', function(e){ 
    e.preventDefault(); 
    alert(this.getAttribute("data")); 
}); 

quando clicco su uno dei link che ottenere l'elenco di tutti i attributo "i dati". Abbiamo solo bisogno dei dati del link cliccato.

Answer 1

all fornisce un elenco di elementi corrispondenti. È possibile utilizzare each per scorrere l'elenco e fare cose per singolo nodo. Fare riferimento al loro Node Class API per ulteriori informazioni.

Questo è il codice e an example on jsfiddle.

Y.all('.sample').each(function(node) { 
    node.on('click', function(e) { 
     e.preventDefault(); 
     alert(node.getAttribute("data")); 
    }); 
});​ 

C'è anche una FAQ per questa domanda nel manuale d'uso Event yuilibrary.com (http://yuilibrary.com/yui/docs/event/#nodelist-this). In genere è preferibile utilizzare la delega degli eventi.

Answer 2

È inoltre possibile utilizzare e.target invece di this per accedere all'elemento viene cliccato:

Y.all('.sample').on('click', function(e){ 
    e.preventDefault(); 
    alert(e.target.getAttribute("data")); 
}); 

E per prestazioni ancora migliori è possibile utilizzare event delegation:

Y.one('body').delegate('click', function(e){ 
    e.preventDefault(); 
    alert(this.getAttribute("data")); 
}, '.sample'); 

Answer 3

Qui delegazione evento è la soluzione migliore, d'accordo con @juandopazo

Se non si desidera utilizzare la delega, è possibile utilizzare Y.all ('. . Campione ') ciascuno (...) (soluzione da @ user322896) o e.target (soluzione da @juandopazo), ma di solito lo fanno in un altro modo:

Y.on('click', function(e){ 
    e.preventDefault(); 
    alert(this.getAttribute("data")); 
}, '.sample'); 

Questa non è una sintassi delegazione (ascoltatori sarà collegato ai collegamenti directelly) e non esiste alcun oggetto NodeList, quindi this fa riferimento a un particolare nodo di collegamento. Questo modo ha anche un vantaggio di preformance rispetto a Y.all('.sample'), leggi questo: Why would I use Y.on() or Y.delegate() instead of node.on() and node.delegate()?