详解Javascript事件驱动编程_javascript技巧

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

二、事件驱动原理

  • 事件源:产生事件的地方(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编程、javascript编程培训、javascript函数式编程、javascript闭包详解、javascript高级编程,以便于您获取更多的相关知识。

时间: 2016-01-03

详解Javascript事件驱动编程_javascript技巧的相关文章

详解JavaScript函数对象_javascript技巧

函数 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块. function One(leve , leve){ //code return leve+leve } 注释: 形参不需要加上类型: return语句为可选,没有return语句的函数返回undefined: 局部变量与全局变量 在函数内声明:局部变量 在函数外声明:全局变量 向一个新变量名赋值时并没有使用var:这个变量会变为新的全局变量 函数可以作为值 形式1: function init(){ alert("One&qu

详解javascript高级定时器_javascript技巧

setTimeout()和setInterval()可以用来创建定时器,其基本的用法这里就不再做介绍了.这里主要介绍一下javascript的代码队列.在javascript中没有任何代码是立即执行的,一旦进程空闲则尽快执行.所以说定时器中设置的时间并不代表执行时间就一定相符,而是代表代码会在指定时间间隔后加入到队列中进行等待.如果在这个时间点上,队列中没有其他东西,那么这段代码就会被执行,表面上看上去好像代码就在精确指定的时间点上执行了.所以就会产生一些问题. 重复定时器 通常,我们使用set

详解JavaScript对象序列化_javascript技巧

一.什么是对象序列化? 对象序列化是指将对象的状态转换为字符串(来自我这菜鸟的理解,好像有些书上也是这么说的,浅显易懂!): 序列化(Serialization)是将对象的状态信息转换为可以存储或传输的形式的过程(来自"百度百科-序列化",学术性强,略显高端): 二.为什么会有对象序列化? 世间万物,都有其存在的原因.为什么会有对象序列化呢?因为程序猿们需要它.既然是对象序列化,那我们就先从一个对象说起: var obj = {x:1, y:2};   当这句代码运行时,对象obj的内

详解JavaScript时间格式化_javascript技巧

感谢某前辈写的JS格式化日期和时间JS代码,很好很强大!!! 前言: js虽然提供了各种获取时间Date对象的不同属性方法,如:getDate 方法 | getDay 方法 | getFullYear 方法 | getHours 方法 ... ... 等等,但是却没有像java那样提供一个方法来供用户来根据自身提供的模板(pattern),来格式化指定时间对象,所以自己就封装了一个小方法,只供大家闲来调侃-.-,有好的建议还望慷慨指荐哦. 用到知识点:  • arguments:该对象代表正在执

详解JS面向对象编程_javascript技巧

因为JavaScript是基于原型(prototype)的,没有类的概念(ES6有了,这个暂且不谈),我们能接触到的都是对象,真正做到了一切皆为对象 所以我们再说对象就有些模糊了,很多同学会搞混类型的对象和对象本身这个概念,我们在接下来的术语中不提对象,我们使用和Java类似的方式,方便理解 方式一 类(函数模拟) function Person(name,id){ //实例变量可以被继承 this.name = name; //私有变量无法被继承 var id = id; //私有函数无法被继

详解JavaScript模块化开发_javascript技巧

什么是模块化开发? 前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来js得到重视,应用也广泛起来了,jQuery,Ajax,Node.Js,MVC,MVVM等的助力也使得前端开发得到重视,也使得前端项目越来越复杂,然而,JavaScript却没有为组织代码提供任何明显帮助,甚至没有类的概念,更不用说模块(module)了,那么什么是模块呢? 一个模块就是实现特定功能的文件,有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块.模块开发

详解javascript遍历方式_javascript技巧

为了方便例子讲解,现有数组和json对象如下 var demoArr = ['Javascript', 'Gulp', 'CSS3', 'Grunt', 'jQuery', 'angular']; var demoObj = { aaa: 'Javascript', bbb: 'Gulp', ccc: 'CSS3', ddd: 'Grunt', eee: 'jQuery', fff: 'angular' }; for 可以直接看示例,用得太多了,很简单 (function() { for(var

详解javascript事件冒泡_javascript技巧

事件是javascript中的核心内容之一,在对事件的应用中不可避免的要涉及到一个重要的概念,那就是事件冒泡,在介绍事件冒泡之前,先介绍一下另一个重要的概念事件流:一.什么是事件流: 文档对象模型(DOM)是一个树形结构,可以形象的用下图表示. 如果一个html元素触发事件,那么这个事件就会在DOM树中的触发节点和根节点之间按照一定的顺序传播,所有经过的节点都会接收到被触发的事件,这个传播过程被称之为事件流.按照事件的传播顺序,可以将其分为两类,一种是事件冒泡,一种是事件捕获,这里就涉及到本章要

JavaScript 继承详解及示例代码_javascript技巧

有些知识当时实在看不懂的话,可以先暂且放下,留在以后再看也许就能看懂了. 几个月前,抱着<JavaScript 高级程序设计(第三版)>,啃完创建对象,就开始啃起了 继承 ,然而啃完 原型链 就实在是看不下去了,脑子越来越乱,然后就把它扔一边了,继续看后面的.现在利用这个暑假搞懂了这个继承,就把笔记整理一下啦. 原型链(Prototype Chaining) 先看一篇文章,文章作者讲的非常不错,并且还配高清套图哦.lol- 链接: [学习笔记] 小角度看JS原型链 从原文中小摘几句 构造函数通