详解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 相关文章推荐
PJ Blog修改-禁止复制的代码和方法
Oct 25 Javascript
js实现iframe动态调整高度的代码
Jan 06 Javascript
用户注册常用javascript代码
Aug 29 Javascript
jqgrid 编辑添加功能详细解析
Nov 08 Javascript
全面了解addEventListener和on的区别
Jul 14 Javascript
javascript基本常用排序算法解析
Sep 27 Javascript
vue综合组件间的通信详解
Nov 06 Javascript
详解Vue 事件修饰符capture 的使用
Dec 29 Javascript
深入了解响应式React Native Echarts组件
May 29 Javascript
小程序实现搜索框功能
Mar 26 Javascript
使用jQuery实现掷骰子游戏
Oct 24 jQuery
jQuery实现html可联动的百分比进度条
Mar 26 jQuery
基于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类分享
2014/02/07 PHP
php+ajax无刷新分页实例详解
2015/12/07 PHP
php无法连接mysql数据库的正确解决方法
2016/07/01 PHP
PHP+swoole+linux实现系统监控和性能优化操作示例
2019/04/15 PHP
jQuery AJAX回调函数this指向问题
2010/02/08 Javascript
关于js new Date() 出现NaN 的分析
2012/10/23 Javascript
IE6下拉框图层问题探讨及解决
2014/01/03 Javascript
用队列模拟jquery的动画算法实例
2015/01/20 Javascript
JS实现点击按钮自动增加一个单元格的方法
2015/03/09 Javascript
jQuery插件pagination实现分页特效
2015/04/12 Javascript
chrome调试javascript详解
2015/10/21 Javascript
jQuery图片轮播实现并封装(一)
2016/12/03 Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
2017/01/19 Javascript
AngularJS实现的简单拖拽功能示例
2018/01/02 Javascript
浅析Vue实例以及生命周期
2018/08/14 Javascript
解决layui弹框失效的问题
2019/09/09 Javascript
js+css实现全屏侧边栏
2020/06/16 Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
2020/10/13 Javascript
Angular处理未可知异常错误的方法详解
2021/01/17 Javascript
简介Python中用于处理字符串的center()方法
2015/05/18 Python
Python缩进和冒号详解
2016/06/01 Python
Python2.7.10以上pip更新及其他包的安装教程
2018/06/12 Python
使用python将大量数据导出到Excel中的小技巧分享
2018/06/14 Python
python opencv如何实现图片绘制
2020/01/19 Python
10个python3常用排序算法详细说明与实例(快速排序,冒泡排序,桶排序,基数排序,堆排序,希尔排序,归并排序,计数排序)
2020/03/17 Python
HTML5 Canvas 破碎重组的视频特效的示例代码
2019/09/24 HTML / CSS
FC-Moto英国:欧洲最大的摩托车服装和头盔商店之一
2019/08/25 全球购物
印度第一网上礼品店:IGP.com
2020/02/06 全球购物
String和StringBuffer的区别
2015/08/13 面试题
招聘专员岗位职责
2014/03/07 职场文书
房屋出租协议书
2014/04/10 职场文书
简历自我评价模板
2015/03/11 职场文书
公司晚宴祝酒词
2015/08/11 职场文书
2016年教师党员公开承诺书
2016/03/24 职场文书
PyTorch的Debug指南
2021/05/07 Python
比较几种Redis集群方案
2021/06/21 Redis