Evitar el uso de onCLick

[Rafael]

Tengo un JavaScript simple que cambia una imagen en otro lado de la página cuando se hace click. Amplía la foto de una galería.

Estoy usando en onClick, lo que obviamente me permite meterlo en cualquier objeto, por ejemplo en una miniatura de otras imágenes o en un simple a href="#"

Código HTML:

<a href="#" onClick="changeImage('Image1.jpg');">Click me</a>
<a href="#" onClick="changeImage('Image2.jpg');">Click me too</a> 

Lo que quiero es evitar el uso del onClick, siguiendo la política unobtrusive JavaScript.

Código HTML:

<a href="Image1.jpg">Click me</a>
<a href="Image2.jpg">Click me too</a> 

¿Cómo podría disparar la función changeImage, de manera que solito tome el link real?

En caso de que no esté el JavaScript activado, pues ya use el link y mande a la foto, pero en el caso esperado, no quiero que se dispare el link a una página nueva, sino que me cambie la foto grande de la galería.

[Alexis88]

Tendrías que:

1. Por cuestiones de conflicto con elementos semejantes cuya funcionalidad no se encuentre comprendida por lo que tienes en mente, sería recomendable que asignes una misma clase o pseudoatributo a los enlaces en cuestión o bien que los agrupes dentro de un elemento de bloque.

2. Al tener lo anterior, puedes delegar el evento click ya sea al contenedor de los enlaces o al documento y tomar al elemento pulsado a partir del objeto del evento.

3. Dentro del bloque de instrucciones, cancelas el comportamiento natural del enlace (redirigir), tomarías el valor del atributo href y lo pasarías como argumento en la llamada a la función changeImage().

Por ejemplo:

Código HTML:

<section id="enlaces">
    <a href="Image1.jpg">Click me</a>
    <a href="Image2.jpg">Click me too</a> 
</section>
 

Código Javascript:

document.querySelector("#enlaces").addEventListener("click", function(event){ //Al "clickear" dentro del contenedor
    if (event.target.tagName == "A"){ //Si el elemento "clickeado" es un enlace
        event.preventDefault(); //Cancelar el evento
        changeImage(event.target.href); //Y llamas a la función pasándole el valor del atributo "href"
    }
}, false);
 

[Rafael]

Gracias, le voy a dar una revisada :o)

[alvaro_trewhela]

Me sumo totalmente a lo que dice alexis,

Por otro lado si no deseas usar otra etiqueta, esto haría, es feo pero funcional y rápido:

Código JAVASCRIPT:

function changeImage(el, ev){
var enlace = el.getAttribute("href"); //toma de href
ev.preventDefault();
 
//el resto de tu funcion
}
 

Y a tus imágenes le agregas:
onclick="changeImage(this, event);"


<a href="imagenX.jpg" onclick="changeImage(this, event);" />
<a href="imagenY.jpg" onclick="changeImage(this, event);" />
<a href="imagenZ.jpg" onclick="changeImage(this, event);" />

[Rafael]

Oh Gracias alvaro. También lo voy a revisar.