ID des Elements abrufen, das eine Funktion aufgerufen hat

Wie kann ich die ID eines Elements abrufen, das eine JS-Funktion aufgerufen hat?

body.jpg ist ein Bild eines Hundes, während der Benutzer seine Maus über den Bildschirm auf verschiedene Körperteile richtet. Ein vergrößertes Bild wird angezeigt. Die ID des Bereichselements ist identisch mit dem Dateinamen des Bildes abzüglich des Ordners und der Erweiterung.

<div>
    <img src="images/body.jpg" usemap="#anatomy"/>
</div>

<map name="anatomy">
  <area id="nose" shape="rect" coords="280,240,330,275" onmouseover="zoom()"/>
</map>

<script type="text/javascript">
function zoom()
{
 document.getElementById("preview").src="images/nose.jpg";
}
</script>

<div>
<img id="preview"/>
</div>

Ich habe meine Nachforschungen angestellt und bin als letztes Mittel zu Stack Overflow gekommen. Ich bevorzuge eine Lösung ohne jQuery.

Übergeben Sie einen Verweis auf das Element an die Funktion, wenn es aufgerufen wird:

<area id="nose" onmouseover="zoom(this);" />

<script>
  function zoom(ele) {
    var id = ele.id;

    console.log('area element id = ' + id);
  }
</script>

Ich bin überrascht, dass niemand die Verwendung thisim Event-Handler erwähnt hat. Es funktioniert automatisch in modernen Browsern und kann in anderen Browsern verwendet werden. Wenn Sie Ihren Ereignishandler verwenden addEventListeneroder attachEventinstallieren, können Sie festlegen, dass der Wert thisautomatisch dem Objekt zugewiesen wird, das das Ereignis erstellt hat.

Darüber hinaus können Sie mit dem Benutzer programmgesteuert installierter Ereignishandler Javascript-Code von HTML trennen, was häufig als eine gute Sache angesehen wird.

So würden Sie das in Ihrem Code in einfachem Javascript tun:

Entfernen Sie das onmouseover="zoom()"aus Ihrem HTML und installieren Sie den Event-Handler wie folgt in Ihrem Javascript:

// simplified utility function to register an event handler cross-browser
function setEventHandler(obj, name, fn) {
    if (typeof obj == "string") {
        obj = document.getElementById(obj);
    }
    if (obj.addEventListener) {
        return(obj.addEventListener(name, fn));
    } else if (obj.attachEvent) {
        return(obj.attachEvent("on" + name, function() {return(fn.call(obj));}));
    }
}

function zoom() {
    // you can use "this" here to refer to the object that caused the event
    // this here will refer to the calling object (which in this case is the <map>)
    console.log(this.id);
    document.getElementById("preview").src="http://photos.smugmug.com/photos/344290962_h6JjS-Ti.jpg";
}

// register your event handler
setEventHandler("nose", "mouseover", zoom);

Sie können 'this' im Event-Handler verwenden:

document.getElementById("preview").onmouseover = function() {
    alert(this.id);
}

Oder übergeben Sie das Ereignisobjekt wie folgt an den Handler:

document.getElementById("preview").onmouseover = function(evt) {
    alert(evt.target.id);
}

Es wird empfohlen, attachEvent (für IE <9) / addEventListener (IE9 und andere Browser) zum Anhängen von Ereignissen zu verwenden. Das obige Beispiel dient der Kürze.

function myHandler(evt) {
    alert(evt.target.id);
}

var el = document.getElementById("preview");
if (el.addEventListener){
    el.addEventListener('click', myHandler, false); 
} else if (el.attachEvent){
    el.attachEvent('onclick', myHandler);
}

Sie können das Handler-Setup folgendermaßen codieren:

<area id="nose" shape="rect" coords="280,240,330,275" onmouseover="zoom.call(this)"/>

Dann wird thisin Ihrem Handler auf das Element verwiesen. Jetzt werde ich die Einschränkung anbieten, dass ich nicht 100% sicher bin, was passiert, wenn Sie einen Handler in einem <area>Tag haben, hauptsächlich, weil ich seit <area>etwa einem Jahrzehnt kein Tag mehr gesehen habe. Ich denke, es sollte Ihnen das Bild-Tag geben, aber das könnte falsch sein.

bearbeiten - ja, es ist falsch - Sie erhalten das <area>Tag, nicht das <img>. Sie müssen also das übergeordnete Element dieses Elements (die Karte) <img>abrufen und dann das Bild finden, das es verwendet ( dh das Attribut "usemap" bezieht sich auf den Namen der Karte).

erneut bearbeiten - außer es spielt keine Rolle, weil Sie die "ID" des Bereichs durr möchten . Entschuldigung, dass Sie nicht richtig gelesen haben.

Ich weiß, dass Sie keine jQuery-Lösung wollen, aber das Einfügen von Javascript in HTML ist ein großes Nein Nein.

Ich meine, Sie können es tun, aber es gibt viele Gründe, warum Sie es nicht sollten (lesen Sie unauffälliges Javascript, wenn Sie die Details wollen).

Im Interesse anderer Personen, die diese Frage möglicherweise sehen, ist hier die jQuery-Lösung:

$(document).ready(function() {
  $('area').mouseover(function(event) {
    $('#preview').attr('src', 'images/' + $(event.srcElement).attr('id'));
  });
});

Der Hauptvorteil ist, dass Sie keinen Javascript-Code mit HTML mischen. Darüber hinaus müssen Sie dies nur einmal schreiben, und es funktioniert für alle Tags, anstatt den Handler für jedes einzeln angeben zu müssen.

Ein weiterer Vorteil besteht darin, dass jeder jQuery-Handler ein Ereignisobjekt empfängt, das viele nützliche Daten enthält - wie z. B. die Quelle des Ereignisses, den Typ des Ereignisses usw., wodurch das Schreiben des gewünschten Codes erheblich vereinfacht wird.

Da es sich um jQuery handelt, müssen Sie nicht über Cross-Browser-Inhalte nachdenken - ein großer Vorteil, insbesondere bei Ereignissen.

Ich möchte auch, dass dies geschieht, also übergebe einfach die ID des Elements in der aufgerufenen Funktion und verwende es in meiner js-Datei:

function copy(i,n)
{
 var range = document.createRange();
range.selectNode(document.getElementById(i));
window.getSelection().removeAllRanges();
window.getSelection().addRange(range); 
document.execCommand('copy');
window.getSelection().removeAllRanges();
document.getElementById(n).value = "Copied";
}

Für andere, die unerwartet das Fensterelement erhalten, ist dies eine häufige Gefahr:

<a href="javascript:myfunction(this)">click here</a>

welches tatsächlich zum Fensterobjekt reicht this. Stattdessen:

<a href="javascript:nop()" onclick="myfunction(this)">click here</a>

Übergibt das aObjekt wie erwartet. (nop () ist nur eine leere Funktion.)