Maison > Article > interface Web > Explication détaillée de THIS et WINDOW.EVENT.SRCELEMENT dans les compétences JS_javascript

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

WBOYoriginal: 2016-05-16 15:57:491316parcourir

Regardons d'abord un exemple simple :

Copier le code Le code est le suivant :

bfe7eeca3a6509d56660467e0e7b502cAucun problème.

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

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

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)"/>

Pas de problème !

Méthode 2 :

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

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>

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>

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>

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>

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.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment implémenter un panier flottant avec les compétences js cookies_javascriptArticle suivant：Comment implémenter un panier flottant avec les compétences js cookies_javascript

Articles Liés

Voir plus