Penjelasan terperinci tentang kemahiran programming_javascript dipacu acara Javascript-tutorial js-php.cn

Penjelasan terperinci tentang kemahiran programming_javascript dipacu acara Javascript

WBOY

Lepaskan： 2016-05-16 15:22:17

asal

1655 orang telah melayarinya

1. Gambaran Keseluruhan Asas
JS menggunakan mekanisme yang didorong oleh peristiwa untuk bertindak balas kepada operasi pengguna Maksudnya, apabila pengguna beroperasi pada elemen html, masa akan dijana, yang akan mendorong fungsi tertentu untuk diproses.
PS: Kaedah ini sangat serupa dengan mekanisme mendengar acara dalam Java GUI Kedua-duanya perlu mendaftarkan pendengar dan kemudian mengendalikan pendengar, tetapi kaedah pelaksanaannya berbeza.

2. Prinsip dipacu peristiwa

Sumber acara: Tempat acara dijana (elemen html)
Acara: operasi klik/tetikus/operasi papan kekunci, dsb.
Objek peristiwa: Apabila peristiwa berlaku, objek peristiwa mungkin dijanakan Objek masa akan merangkum maklumat masa dan menyerahkannya kepada pengendali acara
Pengendali acara: Kod yang bertindak balas kepada acara pengguna

Kes:

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

Salin selepas log masuk

Klasifikasi acara JS
Acara tetikus
klik dblklik tetikus turun tetikus keluar tetikus atas tetikus alih tetikus dll.
Acara papan kekunci
keydown tekan kekunci kekunci dll.
Acara HTML
ralat pemunggahan muat tetingkap membatalkan perubahan pilihan kotak teks, dsb.
Acara lain
Acara yang dijana semasa pengendalian beberapa objek khas pada halaman

Kes 1: Pantau peristiwa klik tetikus dan dapat memaparkan lokasi x, y klik tetikus

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

Salin selepas log masuk

Selepas mengklik pelayar, koordinat akan dipaparkan (sesetengah pelayar mungkin tidak sah)

Kes 2: Klik butang dan gambar menjadi merah dan hitam
Kaedah: JS mengakses css dalaman

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

Salin selepas log masuk

Kaedah: JS mengakses css luaran (kaedah ini mungkin tidak boleh digunakan untuk semua penyemak imbas)

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>

Salin selepas log masuk

Kes 3: Apakah teras penyemak imbas semasa? (Bezakan ie6/7/8/ Firefox, dsb.)

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

Salin selepas log masuk

Kes 4: Sesuatu acara boleh dipantau oleh pelbagai fungsi

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

Salin selepas log masuk

Kes 5: Halang pengguna daripada menyalin kandungan web dengan mengklik menu butang kanan tetikus dan memilih kandungan 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>

Salin selepas log masuk

Artikel seterusnya akan berkongsi dengan anda kes yang ringkas dan komprehensif: Kalkulator Mudah, saya harap anda tidak terlepasnya.

Terdapat banyak lagi pengaturcaraan berasaskan acara Javascript daripada ini. Saya harap artikel ini akan membantu semua orang dalam mempelajari pengaturcaraan JavaScript.