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

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