快捷導(dǎo)航

詳解Javascript事件驅(qū)動(dòng)編程

更新時(shí)間：2016年01月03日 11:02:38 作者：Switch_vov

這篇文章主要為大家詳細(xì)介紹了Javascript事件驅(qū)動(dòng)編程的相關(guān)資料,通過經(jīng)典案例向大家介紹Javascript事件驅(qū)動(dòng)編程，需要的朋友可以參考下

一、基本概述
JS是采用事件驅(qū)動(dòng)的機(jī)制來響應(yīng)用戶操作的，也就是說當(dāng)用戶對(duì)某個(gè)html元素進(jìn)行操作的時(shí)候，會(huì)產(chǎn)生一個(gè)時(shí)間，該時(shí)間會(huì)驅(qū)動(dòng)某些函數(shù)來處理。
PS：這種方式和Java GUI中的事件監(jiān)聽機(jī)制很像，都是需要注冊(cè)監(jiān)聽，然后再處理監(jiān)聽，只不過實(shí)現(xiàn)的方式不同而已。

二、事件驅(qū)動(dòng)原理

事件源：產(chǎn)生事件的地方(html元素)
事件：點(diǎn)擊/鼠標(biāo)操作/鍵盤操作等等
事件對(duì)象：當(dāng)某個(gè)事件發(fā)生時(shí)，可能會(huì)產(chǎn)生一個(gè)事件對(duì)象，該時(shí)間對(duì)象會(huì)封裝好該時(shí)間的信息，傳遞給事件處理程序
事件處理程序：響應(yīng)用戶事件的代碼

案例：

<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事件分類
鼠標(biāo)事件
click dblclick mousedown mouseout mouseover mouseup mousemove等
鍵盤事件
keydown keypress keyup等
HTML事件
window的onload unload error abort 文本框的select change等
其他事件
頁面中有些特殊對(duì)象運(yùn)行過程中產(chǎn)生的事件

案例1：監(jiān)聽鼠標(biāo)點(diǎn)擊事件，并能夠顯示鼠標(biāo)點(diǎn)擊的位置x,y

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

點(diǎn)擊瀏覽器之后，顯示坐標(biāo)(有些瀏覽器可能無效)

案例2：點(diǎn)擊按鈕，圖片變成紅色，黑色
方法：JS訪問內(nèi)部css

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

方法：JS訪問外部css(這方法不一定適用于所有瀏覽器)

event2.css
.style { 
  border:1; 
  background-color:red; 
  width:300px; 
  height:300px; 
} 
event2.html
<html> 
  <head> 
  <script> 
    function test3(e){ 
      //取連接的第一個(gè)css文件的內(nèi)容用0 
      var ocssRules=document.styleSheets[0].rules; 
      //從ocssRules取出你希望的樣式 
      var style=ocssRules[0];//這里面的0表示event2.css文件中第一個(gè)規(guī)則 
      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>

案例3：區(qū)分當(dāng)前瀏覽器的內(nèi)核是什么?(區(qū)分出ie6/7/8/ 火狐等)

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

案例4：一個(gè)事件可以被多個(gè)函數(shù)監(jiān)聽

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

案例5：防止用戶通過點(diǎn)擊鼠標(biāo)右鍵菜單拷貝網(wǎng)頁內(nèi)容，選擇網(wǎng)頁內(nèi)容

<html> 
  <script type="text/javascript"> 
    function test(){ 
      //window.alert("沒有菜單"); 
      return false; 
    } 
    function test2(){ 
      //window.alert("全選不行"); 
      return false; 
    }   
  </script>  
  </head>  
  <!--body元素響應(yīng)oncontextmenu,onselectstart事件 --> 
  <body oncontextmenu="return test()" onselectstart="return test2()">   
    內(nèi)容 
  </body> 
</html>

下篇文章為大家分享一個(gè)簡單綜合案例：簡單的計(jì)算器，希望大家不要錯(cuò)過。

關(guān)于Javascript事件驅(qū)動(dòng)編程遠(yuǎn)不止這些，希望本文所述對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: