当前位置：首页 > 资讯 > 技术文档

详解Javascript事件驱动编程

时间：2022-09-18 11:46 编辑：来源：阅读：
扫一扫，手机访问

摘要：详解Javascript事件驱动编程

[b]一、基本概述[/b] JS是采用事件驱动的机制来响应用户操作的，也就是说当用户对某个html元素进行操作的时候，会产生一个时间，该时间会驱动某些函数来处理。 PS：这种方式和Java GUI中的事件监听机制很像，都是需要注册监听，然后再处理监听，只不过实现的方式不同而已。 [b]二、事件驱动原理[/b] [img]http://files.jb51.net/file_images/article/201601/201613110218555.jpg[/img] [list] [*][b]事件源：[/b]产生事件的地方(html元素)[/*] [*][b]事件：[/b]点击/鼠标操作/键盘操作等等[/*] [*][b]事件对象：[/b]当某个事件发生时，可能会产生一个事件对象，该时间对象会封装好该时间的信息，传递给事件处理程序[/*] [*][b]事件处理程序：[/b]响应用户事件的代码[/*] [/list] 案例：

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

[list] [*][b]JS事件分类 [/b][/*] [*][b]鼠标事件 [/b][/*] [*]click dblclick mousedown mouseout mouseover mouseup mousemove等[/*] [*][b]键盘事件 [/b][/*] [*]keydown keypress keyup等[/*] [*][b]HTML事件 [/b][/*] [*]window的onload unload error abort 文本框的select change等[/*] [*][b]其他事件[/b][/*] [*]页面中有些特殊对象运行过程中产生的事件 [/*] [/list] [b]案例1：监听鼠标点击事件，并能够显示鼠标点击的位置x,y [/b]

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

点击浏览器之后，显示坐标(有些浏览器可能无效) [b]案例2：点击按钮，图片变成红色，黑色 [/b]方法：JS访问内部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){ 
      //取连接的第一个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>

[b]案例3：区分当前浏览器的内核是什么?(区分出ie6/7/8/ 火狐等) [/b]

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

[b]案例4：一个事件可以被多个函数监听[/b]

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

[b]案例5：防止用户通过点击鼠标右键菜单拷贝网页内容，选择网页内容 [/b]

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

下篇文章为大家分享一个简单综合案例：[b]简单的计算器[/b]，希望大家不要错过。关于Javascript事件驱动编程远不止这些，希望本文所述对大家学习javascript程序设计有所帮助。

全部评论(0)

上一篇：微信小程序商城项目之购物数量加减（3）
下一篇：用iframe实现不刷新整个页面上传图片的实例

资讯排行榜
更多>>