Was ist "das" in JavaScript onclick?

115
<a onclick="javascript:func(this)" >here</a>

Was thisbedeutet im Skript?

Oh mein Gott
quelle
4
@ JMCF125 Er hat es trotzdem geschafft, nützlich zu sein. Ich habe gegoogelt, wie ich das Element bekomme, auf das in einem Onclick-Ereignis geklickt wurde, und bin hier gelandet, wo ich die Antwort gefunden habe.
Wegwerfen Konto
Was macht das Javascript? Warum ist es nicht so <a onclick="func(this)" >here</a>
J3STER
1
@ J3STER Das Präfix "javascript:" ist bei einem Klick falsch. Die Erklärung finden Sie in der Antwort von Tim Down unten .
Mariano Desanze

Antworten:

97

Stellt in dem Fall, nach dem Sie fragen, thisdas HTML-DOM-Element dar.

Es wäre also das <a>Element, auf das geklickt wurde.

TM.
quelle
5
Kann jemand auf die Spezifikation verlinken? Ein naiver Blick auf w3.org/TR/DOM-Level-3-Events war erfolglos.
Ciro Santilli 法轮功 冠状 病. 事件 10
34

Es bezieht sich auf das Element im DOM, zu dem das onclickAttribut gehört:

<script type="text/javascript"
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<script type="text/javascript">
function func(e) {
  $(e).text('there');
}
</script>
<a onclick="func(this)">here</a>

(In diesem Beispiel wird jQuery verwendet .)

Stephan202
quelle
22

Der Wert von Ereignishandlerattributen wie onclick sollte nur JavaScript ohne das Präfix "javascript:" sein. Das Javascript: Pseudo-Protokoll wird in einer URL verwendet, zum Beispiel:

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

Sie sollten jedoch das onclick="func(this)"Formular vorziehen. Beachten Sie auch, dass in meinem obigen Beispiel die Verwendung des Javascript: Pseudo-Protokolls "this" sich eher auf das Fensterobjekt als auf das <a>Element bezieht .

Tim Down
quelle
1
Interessante Ablehnung, obwohl ich genau genommen nehme an, dass diese Antwort nur Ratschläge rund um die Frage bietet, anstatt die Frage direkt zu beantworten.
Tim Down
Ja ... du hast die Frage nicht wirklich beantwortet: - / nichts Persönliches!
Dave
1
@ Dave: Fair genug. Als ich das schrieb, war die Hauptfrage bereits beantwortet. Meine Antwort hätte wahrscheinlich ein Kommentar sein sollen, aber ich vermute, dass ich zu diesem Zeitpunkt nicht genügend Mitarbeiter hatte, um einen Kommentar hinzuzufügen. Lebe und lerne.
Tim Down
8
Nicht genug Repräsentanten zu der Zeit? spuckt seinen Wein aus
Jonathan
5

In JavaScript thisbezieht sich auf das Element, das die Aktion enthält. Zum Beispiel, wenn Sie eine Funktion namens haben hide():

function hide(element){
   element.style.display = 'none';
}

Wenn Sie hidemit thisaufrufen, wird das Element ausgeblendet. Es wird nur das angeklickte Element zurückgegeben, auch wenn es anderen Elementen im DOM ähnlich ist.

Wenn Sie beispielsweise thisauf eine Zahl im folgenden HTML-Code klicken, wird nur der angeklickte Aufzählungspunkt ausgeblendet.

<ul>
  <li class="bullet" onclick="hide(this);">1</li>
  <li class="bullet" onclick="hide(this);">2</li>
  <li class="bullet" onclick="hide(this);">3</li>
  <li class="bullet" onclick="hide(this);">4</li>
</ul>
Steffan Perry
quelle
4

Hier (dies) ist ein Objekt, das alle Merkmale / Eigenschaften des dom-Elements enthält. Sie können durch sehen

console.log(this);

Dadurch werden alle Attributeigenschaften des dom-Elements mit Hierarchie angezeigt. Sie können das dom-Element dadurch manipulieren.

Beschreiben Sie auch auf dem folgenden Link: -

http://www.quirksmode.org/js/this.html

Deepak Dholiyan
quelle
3

Schlüsselwort dies im Ereignis addEventListener

function getValue(o) {
  alert(o.innerHTML);
}

function hide(current) {
  current.setAttribute("style", "display: none");
}

var bullet = document.querySelectorAll(".bullet");

for (var x in bullet) { 
  bullet[x].onclick = function() {
    hide(this);
  };
};
 
/* Using dynamic DOM Event */
document.querySelector("#li").addEventListener("click", function() {
  getValue(this); /* this = document.querySelector("#li") Object */
});
li {
  cursor: pointer;
}
<ul>
  <li onclick="getValue(this);">A</li>
  <li id="li" >B</li>
  <hr />
  <li class="bullet" >1</li>
  <li class="bullet" >2</li>
  <li class="bullet" >3</li>
  <li class="bullet" >4</li>
</ul>

Anteliebe
quelle
2

Beim Aufrufen einer Funktion bezieht sich das Wort "this" auf das Objekt, das die Funktion aufgerufen hat.

In Ihrem Beispiel handelt es sich um einen Verweis auf das Ankerelement. Am anderen Ende greift der Funktionsaufruf dann über den übergebenen Parameter auf Mitgliedsvariablen des Elements zu.

Ichiban
quelle
1

thisverweist auf das Objekt, zu dem die onclickMethode gehört. Darin func thiswäre also der DOM-Knoten des aElements und this.innerTextwäre here.

Gumbo
quelle