详解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 相关文章推荐
用Javascript读取中文COOKIE的解决办法
Feb 15 Javascript
IE网页js语法错误2行字符1、FF中正常的解决方法
Sep 09 Javascript
Bootstrap学习笔记之js组件(4)
Jun 12 Javascript
js简单时间比较的方法
Aug 02 Javascript
jquery实现拖动效果
Aug 10 Javascript
微信小程序  modal弹框组件详解
Oct 27 Javascript
jQuery简单实现遍历单选框的方法
Mar 06 Javascript
如何使用bootstrap框架 bootstrap入门必看!
Apr 13 Javascript
React Form组件的实现封装杂谈
May 07 Javascript
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
May 22 Javascript
vue中使用element-ui进行表单验证的实例代码
Jun 22 Javascript
JavaScript实现省市区三级联动
Feb 13 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
星际争霸任务指南——虫族
2020/03/04 星际争霸
PHP 之 写时复制介绍(Copy On Write)
2014/05/13 PHP
正确的PHP匹配UTF-8中文的正则表达式
2015/05/13 PHP
PHP线程的内存回收问题
2016/07/08 PHP
JavaScript 基础篇之运算符、语句(二)
2012/04/07 Javascript
js实现倒计时时钟的示例代码
2013/12/17 Javascript
使用Javascript简单实现图片无缝滚动
2014/12/05 Javascript
JS获取各种宽度、高度的简单介绍
2014/12/19 Javascript
jQuery插件制作之参数用法实例分析
2015/06/01 Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
2015/09/02 Javascript
javascript日期处理函数,性能优化批处理
2015/09/06 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
2015/11/17 Javascript
BootStrap组件之进度条的基本用法
2017/01/19 Javascript
基于jQuery实现文字打印动态效果
2017/04/21 jQuery
Angular4学习笔记之实现绑定和分包
2017/08/01 Javascript
webpack源码之loader机制详解
2018/04/06 Javascript
vue实现登录拦截
2020/06/29 Javascript
vue在图片上传的时候压缩图片
2020/11/18 Vue.js
详解Vue的七种传值方式
2021/02/08 Vue.js
零基础写python爬虫之神器正则表达式
2014/11/06 Python
Python两个内置函数 locals 和globals(学习笔记)
2016/08/28 Python
在python中利用GDAL对tif文件进行读写的方法
2018/11/29 Python
Pytorch 扩展Tensor维度、压缩Tensor维度的方法
2020/09/09 Python
Python Sqlalchemy如何实现select for update
2020/10/12 Python
Python 里最强的地图绘制神器
2021/03/01 Python
英国礼品和生活方式品牌:Treat Republic
2020/11/21 全球购物
linux面试题参考答案(1)
2016/01/22 面试题
生物科学专业个人求职信范文
2013/12/05 职场文书
保密工作实施方案
2014/02/24 职场文书
政协调研汇报材料
2014/08/15 职场文书
2014年计生协会工作总结
2014/11/21 职场文书
2015年平安创建工作总结
2015/04/29 职场文书
教师节感想
2015/08/11 职场文书
交通安全教育心得体会
2016/01/15 职场文书
《火纹风花雪月无双》预告“神秘雇佣兵” 紫发剑客
2022/04/13 其他游戏
Python中的 enumerate和zip详情
2022/05/30 Python