Kann ich anhand einer Javascript-Methode herausfinden, welches DOM-Element mich angerufen hat?

Question

<a onclick ="foo()" href="bar.html" >Link </a> 

<script> 

... 
function foo(){ 
    //I want to know the href property of whoever called me. 
    //something like this.caller.href ?? 
} 

</script> 

Ich denke, ich könnte einfach alle Element-IDs zuweisen und dann meine eigene ID an die JS-Methode übergeben, die ich anrufe, aber ich suchte nach einem besseren Weg.

Answer 1

Wie wäre es mit einem Argument?

foo(id); 

Answer 2

<a onclick="foo(this)" href="bar.html">Link</a> 

Dann würde sie JavaScript sein:

function foo(ob) { 
    alert(ob.href); //or whatever you want to happen preferably pass an id 
} 

Verwenden Sie den "this" Selektor, wenn Sie das Objekt selbst an die Funktion übergeben werden soll.

Answer 3

Sie den Wert des href Attribut an die Funktion übergeben könnte, wenn es aufgerufen wird:

<a href="http://www.example.com" onclick="foo(this.href)">link</a> 

Answer 4

Wenn der Browser eine Funktion als Ergebnis eines DOM-Ereignis aufruft, übergibt JavaScript ein Objekt in dieser Funktion die enthält Informationen über das Ereignis. Aber es funktioniert ein wenig anders in IE als andere. Um in allen Browsern, foo() sollte ein Argument * nehmen (ich benutze e):

function foo(e) { 
    var sender = (e && e.target) || (window.event && window.event.srcElement); 
    //sender is the DOM element which was clicked 
    alert(sender.href); //assumes the clicked element was an <a> 
} 

Die erste Zeile wird „Sender“ der Wert des Elements zuweisen, die das Ereignis in allen Browsern entstanden.

Nun, wenn Ihr <a> Elemente Kind enthält (zB ein Bild) und einer von diejenigen war das eigentliche Element geklickt, dann ist das Element wird der „Absender“ werden. Wenn dies eine Möglichkeit ist, müssen Sie den DOM vom Sender gehen, bis Sie Ihren Link zu finden:

function foo(e) { 
    var sender = (e && e.target) || (window.event && window.event.srcElement); 
    //sender is the DOM element which was clicked 

    var myEle = sender; 

    //find the parent node until we hit the <a> 
    while(myEle.tagName.toUpperCase() != 'A') { 
    myEle = myEle.parentNode; 
    } 

    //myEle is now the <a>. sender is still the originator. 
    alert(myEle.href); 
} 

* können Sie auch Zugriff auf alle Argumente an die Funktion übergeben, auch wenn sie nicht erklärt werden, unter Verwendung von das arguments[] Array.

Answer 5

Sie müssen das Element nicht als Argument für Ihre Funktion übergeben. Sie können

var a = event.srcElement; 
alert(a.href); 

Answer 6

Die Konvention ist hier, dass diese bezieht sich auf das DOM-Element verwenden, dass der Handler aufgerufen schaltet ist. Wenn Sie also das href des Links wissen wollen:

function foo() { 
    // Inside foo this will refer to the DOM element if called as an event handler 
    var href = this.href 
} 

, die den Trick tun sollten.

EDIT: Wenn foo aus einem Onclick-Handler explizit in dem DOM genannt wird, das heißt

<a [...] onclick="foo()"> 

dann der ursprüngliche Kontext von diese wird innerhalb von foo verloren. Um das zu beheben, kann den Funktionsaufruf an den ursprünglichen Kontext binden:

<a [...] onclick="foo.call(this)">