<a onclick="javascript:func(this)" >here</a>
Was thisbedeutet im Skript?
<a onclick="func(this)" >here</a>
<a onclick="javascript:func(this)" >here</a>
Was thisbedeutet im Skript?
<a onclick="func(this)" >here</a>
Antworten:
Stellt in dem Fall, nach dem Sie fragen, thisdas HTML-DOM-Element dar.
Es wäre also das <a>Element, auf das geklickt wurde.
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 .)
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 .
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>
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: -
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>
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.