Maison > Article > interface Web > Explication détaillée des compétences de programmation_javascript basées sur les événements Javascript

Explication détaillée des compétences de programmation_javascript basées sur les événements Javascript

WBOYoriginal: 2016-05-16 15:22:171610parcourir

1. Aperçu de base
JS utilise un mécanisme événementiel pour répondre aux opérations de l'utilisateur, c'est-à-dire que lorsque l'utilisateur opère sur un élément HTML, une heure sera générée, qui entraînera le traitement de certaines fonctions.
PS : Cette méthode est très similaire au mécanisme d'écoute d'événements dans l'interface graphique Java. Les deux doivent enregistrer l'écouteur puis gérer l'écouteur, mais la méthode d'implémentation est différente.

2. Principe événementiel

Source de l'événement : Où l'événement est généré (élément html)
Événements : Clic/opération de la souris/opération du clavier, etc.
Objet événement : Lorsqu'un événement se produit, un objet événement peut être généré. L'objet temporel encapsulera les informations temporelles et les transmettra au gestionnaire d'événements
Gestionnaire d'événements : Code qui répond aux événements utilisateur

Cas :

<html> 
  <head> 
    <script type="text/javascript"> 
      function test1(e){ 
        window.alert("x=" + e.clientX + " y=" + e.clientY); 
      } 
      function test2(e){ 
        window.alert("x=" + e.clientX + " y=" + e.clientY); 
      } 
      function test3(e){ 
        window.alert(new Date().toLocaleString()); 
      } 
      function test4(e){ 
        if(e.value == "red"){ 
          div1.style.backgroundColor = "red"; 
        } else if (e.value == "black"){ 
          div1.style.backgroundColor = "black"; 
        } 
      } 
    </script> 
  </head> 
  <body> 
    <input type="button" onclick="test1(event)" value="button1"> 
    <input type="button" onmouseover="test2(event)" value="button2"> 
    <input type="button" onclick="test3(event)" value="button3"> 
    <div id="div1" style="width: 400px; height: 300px; background-color: red"></div> 
    <input type="button" onclick="test4(this)" value="red"> 
    <input type="button" onclick="test4(this)" value="black"> 
  </body> 
</html>

Classement des épreuves JS
Événements souris
cliquez double-cliquez sur mousedown mouseout mouseover mouseup mousemove etc.
Événements de clavier
keydown keypress keyup etc.
Événements HTML
erreur de chargement de la fenêtre, annulation du changement de sélection de la zone de texte, etc.
Autres événements
Événements générés lors du fonctionnement de certains objets spéciaux sur la page

Cas 1 : Surveiller les événements de clic de souris et pouvoir afficher l'emplacement x, y du clic de souris

<html> 
   <head> 
   <script> 
   function test1(e){ 
     window.alert("x="+e.clientX+"y="+e.clientY); 
   } 
   </script> 
   </head> 
   <body onmousedown="test1(event)"> 
   </body> 
</html>

Après avoir cliqué sur le navigateur, les coordonnées seront affichées (certains navigateurs peuvent ne pas être valides)

Cas 2 : Cliquez sur le bouton et l'image devient rouge et noire
Méthode : accès JS au CSS interne

//js如何访问css属性，来改变外观 
<html> 
  <head> 
  <script> 
    function test3(e){ 
      var pic=document.getElementById("pic"); 
      if(e.value=="红色"){ 
        pic.style.backgroundColor="red"; 
      } 
      else if(e.value=="黑色"){ 
        pic.style.backgroundColor="black"; 
      } 
   } 
  </script> 
  </head> 
  <body > 
    <div id="pic" style="border:1;background-color:red;width:300px;height:300px"></div> 
    <input type="button" onclick="test3(this)" value="红色"> 
    <input type="button" onclick="test3(this)" value="黑色"> 
  </body> 
</html>

Méthode : accès JS aux CSS externes (cette méthode peut ne pas être applicable à tous les navigateurs)

event2.css
.style { 
  border:1; 
  background-color:red; 
  width:300px; 
  height:300px; 
} 
event2.html
<html> 
  <head> 
  <script> 
    function test3(e){ 
      //取连接的第一个css文件的内容用0 
      var ocssRules=document.styleSheets[0].rules; 
      //从ocssRules取出你希望的样式 
      var style=ocssRules[0];//这里面的0表示event2.css文件中第一个规则 
      if(e.value=="黑色"){ 
        style.style.backgroundColor="black"; 
       } 
       else if(e.value=="红色"){ 
         style.style.backgroundColor="red"; 
       } 
    } 
  </script> 
  </head> 
  <body> 
    <div class="style"></div> 
    <input type="button" onclick="test3(this)" value="红色"> 
    <input type="button" onclick="test3(this)" value="黑色"> 
   </body> 
</html>

Cas 3 : Quel est le cœur du navigateur actuel (Distinguer ie6/7/8/ Firefox, etc.)

<script language="javascript"> 
   if(window.XMLHttpRequest) 
   { //Mozilla, Safari, IE7,IE8  
      if(!window.ActiveXObject) 
    {  // Mozilla, Safari,  
      alert('Mozilla, Safari');  
    } 
     else 
     {  
      alert('IE7 .8');  
    }  
   } 
   else  
   {  
     alert('IE6');  
   }  
</script>

Cas 4 : Un événement peut être surveillé par plusieurs fonctions

<html> 
  <head> 
  function test(e){ 
    window.alert("fss"); 
  } 
  function test1(e){ 
    window.alert("sfdsdf"); 
  } 
  </script> 
  </head> 
  <body> 
    <div class="style"></div> 
    <input type="button" onclick="test(this),test1(this)" value="红色"> 
  </body> 
</html>

Cas 5 : Empêcher les utilisateurs de copier du contenu Web en cliquant sur le menu du bouton droit de la souris et en sélectionnant le contenu Web

<html> 
  <script type="text/javascript"> 
    function test(){ 
      //window.alert("没有菜单"); 
      return false; 
    } 
    function test2(){ 
      //window.alert("全选不行"); 
      return false; 
    }   
  </script>  
  </head>  
  <!--body元素响应oncontextmenu,onselectstart事件 --> 
  <body oncontextmenu="return test()" onselectstart="return test2()">   
    内容 
  </body> 
</html>

Le prochain article partagera avec vous un cas simple et complet : Calculatrice simple, j'espère que vous ne le manquerez pas.

La programmation événementielle Javascript offre bien plus que cela. J'espère que cet article sera utile à tout le monde dans l'apprentissage de la programmation JavaScript.

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：Implémentation d'une fonction de calculatrice simple basée sur les compétences javascript_javascriptArticle suivant：Implémentation d'une fonction de calculatrice simple basée sur les compétences javascript_javascript

Articles Liés

Voir plus