Explication détaillée de THIS et WINDOW.EVENT.SRCELEMENT dans les compétences JS

Explication détaillée de THIS et WINDOW.EVENT.SRCELEMENT dans les compétences JS_javascript

WBOY

Libérer： 2016-05-16 15:57:49

original

1315 Les gens l'ont consulté

Regardons d'abord un exemple simple :

Copier le code Le code est le suivant :

Aucun problème.

Alors dans quelles circonstances ne peut-il pas être utilisé ?

fuction method()
{
  alert(this.value);
}
<input type="text" onblur="method()"/>

Copier après la connexion

Ceci n'est pas possible car method() est une fonction appelée par la fonction de réponse.

Alors, que devez-vous faire dans cette situation ?

Méthode 1 :

fuction method(btn)
{
  alert(btn.value);
}
<input type="text" onblur="method(this)"/>

Copier après la connexion

Pas de problème !

Méthode 2 :

fuction method()
{
  alert(window.event.srcElement.value);
}
<input type="text" onblur="method()"/>

Copier après la connexion

Pas de problème ! window.event.srcElement obtient le contrôle qui a déclenché l'événement

Nous examinons un exemple légèrement plus alambiqué

<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>

Copier après la connexion

Jetons un coup d'œil aux différences et aux liens entre les deux

ceci :

Regardons un exemple :

 <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>

Copier après la connexion

La réponse qui apparaît à ce moment est "undefined", ce qui signifie que l'attribut this ne peut pas être utilisé pour l'obtenir lors de l'appel de la fonction. Regardons l'exemple suivant :

 <!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>

Copier après la connexion

La réponse obtenue à ce moment est « clic », pourquoi est-ce possible à ce moment ? Comme le montre le code, lorsque l'événement onclick appelle la fonction btnClick(), celle-ci est transmise à la fonction en tant que paramètre.

Pour résumer ce qui précède : lors de l'appel d'une fonction, vous ne pouvez pas utiliser directement l'attribut this pour l'obtenir, mais celui-ci doit être passé en paramètre.

window.event.srcElement :

Regardez un exemple ci-dessous :

 <!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>

Copier après la connexion

La réponse obtenue à ce moment est "clic", indiquant que vous pouvez utiliser la propriété window.event.srcElement pour l'obtenir lors de l'appel de la fonction.

Pourquoi cela ne peut-il pas être utilisé directement alors que window.event.srcElement peut être utilisé directement ? Au sens purement littéral, cela signifie « actuel ». Lorsque la fonction est appelée, le contrôle spécifique n'est pas spécifié. Il n'est pas autorisé de l'utiliser directement dans la fonction. Dans le deuxième morceau de code, ceci est passé en paramètre, afin que la réponse correcte puisse être obtenue.

En faitLa différence entre l'utilisation de this et window.event.srcElement est la suivante : si vous souhaitez utiliser cet attribut directement, la fonction à ce moment ne peut pas être appelée mais doit être une fonction de réponse. , alors que window.event. srcElement n'a pas une telle restriction.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Explication détaillée de THIS et WINDOW.EVENT.SRCELEMENT dans les compétences JS_javascript