YUI3 manipulación para tener enlaces mismas clases

Question

Edición evento onclick. Cuando hago clic en uno de los enlaces, hay algunas acciones diferentes que se deben tomar en función del enlace en el que se hizo clic, p. Ej.

<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> 

código del controlador:

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

al hacer clic en cualquiera de los enlaces que consigo la lista de todos los atributos de "datos". Solo necesitamos que se haga clic en los datos del enlace.

Answer 1

all le da una lista de elementos coincidentes. Puede usar each para recorrer la lista y hacer cosas para cada nodo. Consulte su Node Class API para obtener más información.

Aquí está el código y an example on jsfiddle.

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

También hay un FAQ para esta pregunta en la guía del usuario de eventos en yuilibrary.com (http://yuilibrary.com/yui/docs/event/#nodelist-this). En general, es preferible usar la delegación de eventos.

Answer 2

También puede utilizar e.target en lugar de this para acceder al elemento que se ha pulsado:

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

Y para un rendimiento aún mejor que se puede utilizar event delegation:

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

Answer 3

Aquí delegación de eventos es la mejor solución, de acuerdo con @juandopazo

Si no desea usar la delegación, puede usar Y.all ('. . De la muestra ') cada uno (...) (solución de @ user322896) o e.target (solución de @juandopazo), pero por lo general lo hacen de otra manera:

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

Esto no es una sintaxis delegación (oyentes se adjuntará en los enlaces directelly) y no hay ningún objeto NodeList, por lo que this se refiere a un nodo de enlace particular. De esta manera se también han Preformance ventaja comparando con Y.all('.sample'), lee esto: Why would I use Y.on() or Y.delegate() instead of node.on() and node.delegate()?