详解Javascript事件驱动编程


Posted in Javascript onJanuary 03, 2016

一、基本概述
    JS是采用事件驱动的机制来响应用户操作的,也就是说当用户对某个html元素进行操作的时候,会产生一个时间,该时间会驱动某些函数来处理。
PS:这种方式和Java GUI中的事件监听机制很像,都是需要注册监听,然后再处理监听,只不过实现的方式不同而已。

二、事件驱动原理

详解Javascript事件驱动编程

  • 事件源:产生事件的地方(html元素)
  • 事件:点击/鼠标操作/键盘操作等等
  • 事件对象:当某个事件发生时,可能会产生一个事件对象,该时间对象会封装好该时间的信息,传递给事件处理程序
  • 事件处理程序:响应用户事件的代码

案例:

<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事件分类
  • 鼠标事件
  • click dblclick mousedown mouseout mouseover mouseup mousemove等
  • 键盘事件
  • keydown keypress keyup等
  • HTML事件
  • window的onload unload error abort 文本框的select change等
  • 其他事件
  • 页面中有些特殊对象运行过程中产生的事件 

案例1:监听鼠标点击事件,并能够显示鼠标点击的位置x,y

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

点击浏览器之后,显示坐标(有些浏览器可能无效)

案例2:点击按钮,图片变成红色,黑色
方法: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>

案例3:区分当前浏览器的内核是什么?(区分出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:一个事件可以被多个函数监听

<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:防止用户通过点击鼠标右键菜单拷贝网页内容,选择网页内容

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

下篇文章为大家分享一个简单综合案例:简单的计算器,希望大家不要错过。

关于Javascript事件驱动编程远不止这些,希望本文所述对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
基于jQuery的消息提示插件 DivAlert之旅(二)
Apr 01 Javascript
学习并汇集javascript匿名函数
Nov 25 Javascript
转换字符串为json对象的方法详解
Nov 29 Javascript
js取模(求余数)隔行变色
May 15 Javascript
jQuery实现跨域iframe接口方法调用
Mar 14 Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
Sep 05 Javascript
ClearTimeout消除闪动实例代码
Feb 29 Javascript
AngularJs实现分页功能不带省略号的代码
May 30 Javascript
AngularJS ng-controller 指令简单实例
Aug 01 Javascript
老生常谈JQuery data方法的使用
Sep 09 Javascript
详解angularjs结合pagination插件实现分页功能
Feb 10 Javascript
Javascript实现运算符重载详解
Apr 07 Javascript
基于javascript实现仿百度输入框自动匹配功能
Jan 03 #Javascript
js实现搜索框关键字智能匹配代码
Mar 26 #Javascript
javascript合并表格单元格实例代码
Jan 03 #Javascript
JS Array.slice 截取数组的实现方法
Jan 02 #Javascript
jquery实现简单的全选和反选功能
Jan 02 #Javascript
基于Javascript实现弹出页面效果
Jan 01 #Javascript
基于jQuery实现点击弹出层实例代码
Jan 01 #Javascript
You might like
PHP 编程的 5个良好习惯
2009/02/20 PHP
采用ThinkPHP中F方法实现快速缓存实例
2014/06/13 PHP
通过php删除xml文档内容的方法
2015/01/23 PHP
php生成固定长度纯数字编码的方法
2015/07/09 PHP
基于PHP代码实现中奖概率算法可用于刮刮卡、大转盘等抽奖算法
2015/12/20 PHP
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
2011/11/21 Javascript
JavaScript实现动画打开半透明提示层的方法
2015/04/21 Javascript
js拆分字符串并将分割的数据放到数组中的方法
2015/05/06 Javascript
浅谈javascript的call()、apply()、bind()的用法
2016/02/21 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
2016/02/24 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
2016/05/21 Javascript
详解angularjs 关于ui-router分层使用
2017/06/12 Javascript
vue 运用mock数据的示例代码
2017/11/07 Javascript
js 提取某()特殊字符串长度的实例
2017/12/06 Javascript
手动下载Chrome并解决puppeteer无法使用问题
2018/11/12 Javascript
javascript实现考勤日历功能
2018/11/29 Javascript
使用NestJS开发Node.js应用的方法
2018/12/03 Javascript
JavaScript常用事件介绍
2019/01/21 Javascript
实现一个 Vue 吸顶锚点组件方法
2019/07/10 Javascript
JavaScript运动原理基础知识详解
2020/04/02 Javascript
js+css3实现炫酷时钟
2020/08/18 Javascript
vue+element_ui上传文件,并传递额外参数操作
2020/12/05 Vue.js
Python 多线程的实例详解
2017/09/07 Python
Python实现的破解字符串找茬游戏算法示例
2017/09/25 Python
对python3新增的byte类型详解
2018/12/04 Python
Python 模拟动态产生字母验证码图片功能
2019/12/24 Python
windows10在visual studio2019下配置使用openCV4.3.0
2020/07/14 Python
优秀毕业生求职推荐信范文
2013/11/21 职场文书
国际贸易专业个人求职信范文分享
2013/12/14 职场文书
医院实习接收函
2014/01/12 职场文书
《逃家小兔》教学反思
2014/02/23 职场文书
班级体育活动总结
2014/07/05 职场文书
企业领导班子四风对照检查材料
2014/09/27 职场文书
继承公证书格式
2015/01/26 职场文书
专家推荐信怎么写
2015/03/25 职场文书
我收到了德劲DE1107
2022/04/05 无线电