Heim > Artikel > Web-Frontend > 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

WBOYOriginal: 2016-05-16 15:57:491316Durchsuche

Schauen wir uns zunächst ein einfaches Beispiel an:

Code kopieren Der Code lautet wie folgt:

bfe7eeca3a6509d56660467e0e7b502cÜ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.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So implementieren Sie einen schwebenden Warenkorb mit js-cookies_javascript-KenntnissenNächster Artikel：So implementieren Sie einen schwebenden Warenkorb mit js-cookies_javascript-Kenntnissen

In Verbindung stehende Artikel

Mehr sehen