Rumah > Artikel > hujung hadapan web > Penjelasan terperinci tentang kemahiran programming_javascript dipacu acara Javascript

Penjelasan terperinci tentang kemahiran programming_javascript dipacu acara Javascript

WBOYasal: 2016-05-16 15:22:171613semak imbas

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>

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>

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>

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>

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>

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>

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>

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.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Melaksanakan fungsi kalkulator mudah berdasarkan kemahiran javascript_javascriptArtikel seterusnya：Melaksanakan fungsi kalkulator mudah berdasarkan kemahiran javascript_javascript

Artikel berkaitan

Lihat lagi