Web-Frontend
js-Tutorial
Detaillierte Erläuterung von THIS und WINDOW.EVENT.SRCELEMENT in JS_Javascript-Kenntnissen
Detaillierte Erläuterung von THIS und WINDOW.EVENT.SRCELEMENT in JS_Javascript-Kenntnissen
Schauen wir uns zunächst ein einfaches Beispiel an:
Überhaupt kein Problem.
Unter welchen Umständen kann es also nicht verwendet werden?
fuction method()
{
alert(this.value);
}
<input type="text" onblur="method()"/>Dies ist nicht möglich, da method() eine Funktion ist, die von der Antwortfunktion aufgerufen wird.
Was sollten Sie in dieser Situation tun?
Methode 1:
fuction method(btn)
{
alert(btn.value);
}
<input type="text" onblur="method(this)"/>Kein Problem!
Methode 2:
fuction method()
{
alert(window.event.srcElement.value);
}
<input type="text" onblur="method()"/>Kein Problem! window.event.srcElement ruft das Steuerelement ab, das das Ereignis ausgelöst hat
Wir sehen uns ein etwas komplizierteres Beispiel an
<head>
<script type="text/javascript">
function InitEvent() {
var inputs = document.getElementsByTagName_r("input");
for (var i = 0; i < inputs.length; i++) {
inputs[i].onblur = OnblurEvent;
}
}
function OnblurEvent() {
// OnblurEvent是onblur的响应函数，而不是被响应函数调用的函数
// 所以可以用this来获取发生事件的对象
if (this.value.length > 0) {
this.style.backgroundColor = "white";
}
else {
this.style.backgroundColor = "red";
}
}
</script>
</head>
<body onload="InitEvent()">
<input id="Text1" type="text" />
<input id="Text2" type="text" />
<input id="Text3" type="text" />
</body>
</html>Werfen wir einen Blick auf die Unterschiede und Zusammenhänge zwischen den beiden
dieses:
Schauen wir uns ein Beispiel an:
<html>
<title>this与srcElement的区别</title>
<head>
<script type="text/javascipt>"
function btnClick(){
alert(this.value);
}
</script>
</head>
<body>
<input type="button" value="单击" onclick="btnClick()"/>
</body>
</html>
Die Antwort, die zu diesem Zeitpunkt angezeigt wird, ist „undefiniert“, was bedeutet, dass das Attribut this beim Aufruf der Funktion nicht zum Abrufen verwendet werden kann. Schauen wir uns das nächste Beispiel an:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<script type="text/javascript">
function btnClick(btn){
alert(btn.value);
}
</script>
</head>
<body>
<input type="button" onclick="btnClick(this)" value="单击" />
</body>
</html>
Die zu diesem Zeitpunkt erhaltene Antwort lautet „Klick“. Warum ist das zu diesem Zeitpunkt möglich? Wie aus dem Code ersichtlich ist, wird dieser als Parameter an die Funktion übergeben, wenn das onclick-Ereignis die Funktion btnClick() aufruft.
Um das oben Gesagte zusammenzufassen: Wenn Sie eine Funktion aufrufen, können Sie das Attribut this nicht direkt verwenden, um es abzurufen, sondern es muss als Parameter übergeben werden.
window.event.srcElement:
Sehen Sie sich unten ein Beispiel an:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<script type="text/javascript">
function btnClick(){
alert(window.event.srcElement.value);
}
</script>
</head>
<body>
<input type="button" onclick="btnClick()" value="单击" />
</body>
</html>
Die zu diesem Zeitpunkt erhaltene Antwort lautet „Klick“, was darauf hinweist, dass Sie die Eigenschaft window.event.srcElement verwenden können, um sie beim Aufrufen der Funktion abzurufen.
Warum kann dies nicht direkt verwendet werden, aber window.event.srcElement kann direkt verwendet werden? Im rein wörtlichen Sinne bedeutet dies „aktuell“. Beim Aufruf der Funktion wird das konkrete Steuerelement nicht angegeben. Es ist nicht erlaubt, dieses direkt in der Funktion zu verwenden. Im zweiten Codeteil wird dies als Parameter übergeben, sodass die richtige Antwort erhalten werden kann.
TatsächlichDer Unterschied zwischen der Verwendung von this und window.event.srcElement ist: Wenn Sie dieses Attribut direkt verwenden möchten, kann die Funktion zu diesem Zeitpunkt nicht aufgerufen werden, sondern muss eine Antwortfunktion sein , während window.event keine solche Einschränkung hat.
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1389
52
Lassen Sie uns darüber sprechen, warum Vue2 dadurch in verschiedenen Optionen auf Eigenschaften zugreifen kann
Dec 08, 2022 pm 08:22 PM
Dieser Artikel hilft Ihnen bei der Interpretation des Vue-Quellcodes und stellt vor, warum Sie damit in Vue2 auf Eigenschaften in verschiedenen Optionen zugreifen können. Ich hoffe, dass er für alle hilfreich ist!
Ein Artikel, der diesen Punkt versteht und 70 % der Front-End-Leute erreicht
Sep 06, 2022 pm 05:03 PM
Ein Kollege blieb aufgrund eines Fehlers stecken, auf den dadurch hingewiesen wurde. Dieses Zeigeproblem führte dazu, dass eine Pfeilfunktion verwendet wurde, was dazu führte, dass die entsprechenden Requisiten nicht abgerufen werden konnten. Er wusste es nicht, als ich es ihm vorstellte, und dann habe ich mir bewusst die Front-End-Kommunikationsgruppe angesehen. Bisher verstehen es mindestens 70 % der Front-End-Programmierer nicht Sie diesen Link Wenn alles unklar ist Wenn Sie es noch nicht gelernt haben, geben Sie mir bitte eine große Klappe.
Clevere Möglichkeit, dieses Schlüsselwort in jQuery zu verwenden
Feb 25, 2024 pm 04:09 PM
Flexible Verwendung dieses Schlüsselworts in jQuery In jQuery ist das Schlüsselwort this ein sehr wichtiges und flexibles Konzept. Es wird verwendet, um auf das aktuell manipulierte DOM-Element zu verweisen. Durch die rationale Verwendung dieses Schlüsselworts können wir Elemente auf der Seite einfach bedienen und verschiedene interaktive Effekte und Funktionen erzielen. In diesem Artikel werden spezifische Codebeispiele kombiniert, um die flexible Verwendung dieses Schlüsselworts in jQuery vorzustellen. Dieses einfache Beispiel Schauen wir uns zunächst ein einfaches Beispiel an. Angenommen, wir haben eine
Was ist das? Eine ausführliche Analyse dazu in JavaScript
Aug 04, 2022 pm 05:02 PM
Was ist das? Der folgende Artikel wird Ihnen dies in JavaScript vorstellen und auf die Unterschiede zwischen verschiedenen Aufrufmethoden von Funktionen eingehen. Ich hoffe, er wird Ihnen hilfreich sein!
So verwenden Sie diese Methode in Java
Apr 18, 2023 pm 01:58 PM
1. Schlüsselwort this 1. Typ davon: Welches Objekt aufgerufen wird, ist der Referenztyp dieses Objekts 2. Zusammenfassung der Verwendung 1. this.data;//Zugriffsattribut 2. this.func();//Zugriffsmethode 3.this ( );//Andere Konstruktoren in dieser Klasse aufrufen 3. Erklärung der Verwendung 1.this.data wird in Mitgliedsmethoden verwendet. Lassen Sie uns sehen, was passiert, wenn dies nicht hinzugefügt wird classMyDate{publicintyear;publicintmonth;publicintday; intmonth,intday){ye
Wie ändert JavaScript diesen Zeiger? Kurze Analyse von drei Methoden
Sep 19, 2022 am 09:57 AM
Wie ändert JavaScript diesen Zeiger? Der folgende Artikel stellt Ihnen drei Möglichkeiten vor, dies in JS zu ändern. Ich hoffe, er wird Ihnen hilfreich sein!
Detaillierte Erklärung hierzu in der JavaScript-Pfeilfunktion
Jan 25, 2024 pm 01:41 PM
Die Pfeilfunktion in JavaScript ist eine relativ neue Syntax. Im Gegenteil, die Pfeilfunktion zeigt auf das Gültigkeitsbereichsobjekt, das sie enthält statisch; 2. Pfeilfunktionen können nicht als Konstruktoren verwendet werden; 3. Pfeilfunktionen können nicht als Methoden verwendet werden.
Lassen Sie mich die vier verbindlichen Regeln hierfür im Detail erläutern
Nov 01, 2022 pm 05:49 PM
Das Schlüsselwort this ist einer der komplexesten Mechanismen in JavaScript. Es handelt sich um ein ganz besonderes Schlüsselwort, das im Umfang aller Funktionen automatisch definiert wird. Doch selbst sehr erfahrenen JavaScript-Entwicklern fällt es schwer zu sagen, worauf genau es verweist.
