Eigenschaften von geklicktem Objekt erhalten (<img>)

    Hey zusammen,


    möchte kurz bei euch etwas nachfragen und zwar möchte ich gerne auf eine bestimmte Klasse (sind <img>) mit einem Listener ein Event (click) prüfen und falls das gemacht wird, dann möchte ich in Javascript etwas damit abarbeiten. Dazu benötige ich aber die URL des geklickten Bildes (bzw. des Objektes). Ich müsste doch mit dem **this** Objekt auch an den **src=""** des **<img>** gelangen, oder? Ich kann natürlich über **innerHTML** und weiteren String-Manipulatoren mir das Ergebnis in JS selber generieren aber das wäre ja eine Mehraufwand als wenn ich direkt auf das Attribut **src** Zugriff hätte.


    Mein Quellcode sieht ungefähr wie folgt aus:


    Code
    <div class="image-handler"><img src="foobar" /></div>


    Das **<img>** selber hat keine Klasse oder ID. Wahrscheinlich gehen deshalb die Properties nicht, weil ich das **Div** Element im this Objekt wiederfinde und nicht das **img**.


    Jede Info ist herzlich willkommen.
    Grüße
    Tobi

    Hey LukasHH, korrekt sowas meinte ich. Das Thema ist nur, dass ich das nicht für jedes Image machen möchte sondern nur für die Images, welche im div Kontainer mit der Klasse "image-handler" vorzufinden sind. Kann ich das irgendwie (ähnlich wie bei css) umsetzen (.image-handler > img)?


    Mit anderen Worten, dein Javascript legt den Event Handler auf das "img". In meinem Fall ist es derzeit auf die Klasse "image-handler" gelegt, wodurch ich keinen Zugriff auf das Attribut "src" habe, da mein $(this) Objekt nicht das Image ist sonder der darüberliegende <div> Kontainer. Beispiel:


    Code
    $(".image-handler").on('click', function() {

  // $(this) ist jetzt das <div> Objekt und nicht das img Objekt. Somit kann ich nicht auf .attr('src') zugreifen:
  var a = $(this).innerHTML;

  // Gibt mir <img src="..." alt="..." title="..." /> aus
  console.log(a);
}


    Ist es möglich direkt das <img> Objekt anzusprechen? Quasi so in der Art:


    Code
    // Auf Klasse image-handler und dann das Objekt <img>
$(".image-handler > img").on('click', function() {
  // $(this) sollte jetzt das Img Objekt beherbergen...
}


    Ich teste das mal, und such weiter. Das muss es geben ;)

    Okay. Selbst gefunden. Es geht wie ich das meinte:


    Code
    $(".image-handler > img").on('click', function() {});


    Sollte öfter mit jsFiddle testen ;)
    Natürlich ist Kritik willkommen, sollte das eine Art sein die man vermeiden sollte.