suchen

Heim  >  Artikel  >  Web-Frontend  >  Detaillierte Erläuterung der ereignisgesteuerten Javascript-Programmierung_Javascript-Fähigkeiten

Detaillierte Erläuterung der ereignisgesteuerten Javascript-Programmierung_Javascript-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:22:171645Durchsuche

1. Grundlegende Übersicht
JS verwendet einen ereignisgesteuerten Mechanismus, um auf Benutzervorgänge zu reagieren. Das heißt, wenn der Benutzer ein HTML-Element bearbeitet, wird eine Zeit generiert, die die Verarbeitung bestimmter Funktionen antreibt.
PS: Diese Methode ist dem Ereignisüberwachungsmechanismus in der Java-GUI sehr ähnlich. Beide müssen den Listener registrieren und dann den Listener verarbeiten, aber die Implementierungsmethode ist unterschiedlich.

2. Ereignisgesteuertes Prinzip

  • Ereignisquelle: Wo das Ereignis generiert wird (HTML-Element)
  • Ereignisse: Klick/Mausbedienung/Tastaturbedienung usw.
  • Ereignisobjekt: Wenn ein Ereignis auftritt, kann ein Ereignisobjekt generiert werden. Das Zeitobjekt kapselt die Zeitinformationen und übergibt sie an den Ereignishandler
  • Ereignishandler: Code, der auf Benutzerereignisse reagiert

Fall: 

<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>
  • JS-Ereignisklassifizierung
  • Maus-Events
  • Klicken Sie auf Doppelklick, klicken Sie auf MouseDown, MouseOut, MouseOver, MouseUp, MouseMove usw.
  • Tastatur-Events
  • Taste nach unten, Tastendruck, Taste nach oben usw.
  • HTML-Ereignisse
  • Fenster beim Laden, Entladen, Fehler, Abbruch, Auswahl, Änderung des Textfelds usw.
  • Andere Veranstaltungen
  • Ereignisse, die während des Betriebs einiger spezieller Objekte auf der Seite generiert werden

Fall 1: Mausklickereignisse überwachen und die Position x, y des Mausklicks anzeigen können

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

Nach dem Klicken auf den Browser werden die Koordinaten angezeigt (einige Browser sind möglicherweise nicht gültig)

Fall 2: Klicken Sie auf die Schaltfläche und das Bild wird rot und schwarz
Methode: JS greift auf internes CSS zu

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

Methode: JS greift auf externes CSS zu (diese Methode ist möglicherweise nicht auf alle Browser anwendbar)

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>

Fall 3: Was ist der Kern des aktuellen Browsers (Unterscheiden Sie ie6/7/8/Firefox usw.)

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

Fall 4: Ein Ereignis kann durch mehrere Funktionen überwacht werden 

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

Fall 5: Verhindern Sie, dass Benutzer Webinhalte kopieren, indem Sie mit der rechten Maustaste auf das Menü klicken und Webinhalte auswählen

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

Der nächste Artikel stellt Ihnen einen einfachen und umfassenden Fall vor: Einfacher Rechner, ich hoffe, Sie verpassen ihn nicht.

Zur ereignisgesteuerten Javascript-Programmierung gehört noch viel mehr. Ich hoffe, dass dieser Artikel allen beim Erlernen der JavaScript-Programmierung hilfreich sein wird.

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：Implementierung einer einfachen Taschenrechnerfunktion basierend auf Javascript_Javascript-KenntnissenNächster Artikel：Implementierung einer einfachen Taschenrechnerfunktion basierend auf Javascript_Javascript-Kenntnissen

In Verbindung stehende Artikel

Mehr sehen