详解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笔试题目附答案@20081025_jb51.net
Oct 26 Javascript
AeroWindow 基于JQuery的弹出窗口插件
Jun 27 Javascript
仿淘宝TAB切换搜索框搜索切换的相关内容
Sep 21 Javascript
javascript数据结构与算法之检索算法
Apr 04 Javascript
JavaScript使用Prototype实现面向对象的方法
Apr 14 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
Mar 01 Javascript
javascript时间差插件分享
Jul 18 Javascript
Angular2 组件交互实例详解
Aug 24 Javascript
微信小程序使用audio组件播放音乐功能示例【附源码下载】
Dec 08 Javascript
vue结合element-ui使用示例
Jan 24 Javascript
JavaScript 替换所有匹配内容及正则替换方法
Feb 12 Javascript
uniapp 仿微信的右边下拉选择弹出框的实现代码
Jul 12 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
咖啡机如何保养和日常清洁?
2021/03/03 冲泡冲煮
php时间不正确的解决方法
2008/04/09 PHP
字母顺序颠倒而单词顺序不变的php代码
2010/08/08 PHP
Yii2实现自定义独立验证器的方法
2017/05/05 PHP
yii插入数据库防并发的简单代码
2017/05/27 PHP
用window.location.href实现刷新另个框架页面
2007/03/07 Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
2013/04/15 Javascript
json数据处理技巧(字段带空格、增加字段、排序等等)
2013/06/14 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
2015/06/23 Javascript
jQuery插件之validation插件
2017/03/29 jQuery
js实现复制功能(多种方法集合)
2018/01/06 Javascript
对Angular中单向数据流的深入理解
2018/03/31 Javascript
vue 实现滚动到底部翻页效果(pc端)
2019/07/31 Javascript
vue键盘事件点击事件加native操作
2020/07/27 Javascript
[02:37]2018DOTA2亚洲邀请赛赛前采访-EG篇
2018/04/03 DOTA
[00:05]ChinaJoy现场 DOTA2玩家高呼“CN DOTA BEST DOTA”
2019/08/04 DOTA
Python实现约瑟夫环问题的方法
2016/05/03 Python
python thrift搭建服务端和客户端测试程序
2018/01/17 Python
python多进程下实现日志记录按时间分割
2019/07/22 Python
浅谈pytorch grad_fn以及权重梯度不更新的问题
2019/08/20 Python
解决Django连接db遇到的问题
2019/08/29 Python
Django使用list对单个或者多个字段求values值实例
2020/03/31 Python
Python requests模块session代码实例
2020/04/14 Python
HTML5的结构和语义(3):语义性的块级元素
2008/10/17 HTML / CSS
Petmate品牌官方网站:宠物用品
2018/11/25 全球购物
UNIX文件系统常用命令
2012/05/25 面试题
项目资料员岗位职责
2013/12/10 职场文书
计算机大学生职业生涯规划书范文
2014/02/19 职场文书
2014村务公开实施方案
2014/02/25 职场文书
给小学生的新年寄语
2014/04/04 职场文书
《从现在开始》教学反思
2014/04/15 职场文书
老龙头导游词
2015/02/11 职场文书
小学重阳节活动总结
2015/03/24 职场文书
村主任当选感言
2015/08/01 职场文书
Python Pycharm虚拟下百度飞浆PaddleX安装报错问题及处理方法(亲测100%有效)
2021/05/24 Python
Win11怎么修改电源模式?Win11修改电源模式的方法
2022/04/05 数码科技