JavaScript事件处理

—————事件的处理流程；

—————动态事件绑定；

—————常用的事件处理。

1、事件的概念

在页面之中，会针对用户的每一个操作进行记录。在页面中的事件可以简单的理解为：页面打开、页面关闭、单机页面、双击页面等。当用户捕捉到事件之后，就可以通过指定的函数来进行处理。

范例：观察事件基本流程(页面打开事件onload、页面关闭事件onunload)

event.html

<!doctype html>

<html lang="zh-CN">

    <head>

        <meta charset="utf-8">

        <meta name="description" content=event.html"">

        <meta name="keywords" content="event,html,js">

        <title>javascript的程序开发之事件处理调用各自的函数</title>

        <script type="text/javascript" src="event.js"></script>

    </head>

    <body onload="loadFun()" onunload="unloadFun()">

    </body>

</html>

　　其中unload与on unload两个事件只能够用于<body>元素上。现在需要在js文件里编写这两个对应的函数。

event.js

function loadFun(){

    alert("欢迎光临");

}

function unloadFun(){

    alert("滚吧，别再来了！");

}

现在可以发现，所有的事件要想进行处理，都一定会存在一个专门的处理函数完成。

实际上所有的JavaScript事件都会以on开头。如果一个事件可能调用多个函数处理，那么函数之间加上分号“；”。

event.html

<!doctype html>

<html lang="zh-CN">

    <head>

        <meta charset="utf-8">

        <meta name="description" content=event.html"">

        <meta name="keywords" content="event,html,js">

        <title>javascript的程序开发之事件处理，调用多个函数</title>

        <script type="text/javascript" src="event.js"></script>

    </head>

    <body onload="loadFun();unloadFun()” onunload="unloadFun()">

    </body>

</html>

 

2、动态事件的绑定

　　如果从开发的角度来讲，所有的JavaScript代码都应该在*.js文件里面编写。那么事件呢？发现事件都在html文件里面编写，于是这个时候就会产生问题，美工说了，先写代码，再做美工，程序说了，先做美工，再写程序。专业前端说了，做你的美工去，我跟你并行。

　　在开发中优秀的前端工程师们，不可能将处理的事件直接在HTML元素中定义，都往往采用动态绑定的形式，在页面加载的时候绑定。

范例：编写页面绑定操作

event.html

<!doctype html>

<html lang="zh-CN">

    <head>

        <meta charset="utf-8">

        <meta name="description" content=event.html"">

        <meta name="keywords" content="event,html,js">

        <title>javascript的程序开发之事件处理</title>

        <script type="text/javascript" src="event.js"></script>

    </head>

    <body>

    </body>

</html>

event.js

window.onload = function(){   //为onload事件绑定处理

     loadFun();   //调用页面加载的处理

}

window.onunload = function(){ //为onunload事件绑定处理

      unloadFun(); //调用页面退出的处理

}

function loadFun(){

    alert("页面加载");

}

function unloadFun(){

    alert("页面退出");

}

网页一打开就出现了页面加载的弹框：

网页一关闭就出现了页面退出的弹框：

但是在开发中，事件可能有很多种。那么必须要保证这个元素有一个独一无二的id属性。

范例：动态绑定一个按钮事件

event.html

<!doctype html>

<html lang="zh-CN">

<head>

    <meta charset="utf-8">

    <meta name="description" content=event.html"">

    <meta name="keywords" content="event,html,js">

    <title>javascript的程序开发之事件处理</title>

    <script type="text/javascript" src="event.js"></script>

</head>

<body>

    <button id="mybutton">PUSH ME</button>

</body>

</html>

event.js

function fun(){

   alert("按钮被点击了!");

}

window.onload = function(){

  //为onload事件绑定处理

  //在JavaScript里面所有的元素实际上都属于对象

  //如果要想取得对象，则可以使用document.getElementById("ID名称")

  var obj = document.getElementById("mybutton");

  //取得id为mybutton的一个对象

  if(obj != undefined){ //表示此对象已经明确存在了

    //对象.addEventListener(事件类型,处理函数,false)

    //动态绑定事件时不要再加上"on"

    obj.addEventListener("click",function(){

        fun();

    },false);

  }

}

点击按钮显示效果如下:

总结：

以上给出的JavaScript的事件处理操作，就是现阶段主要使用的模式。

3、JavaScript中常用事件；

处理鼠标事件： 在Java中鼠标事件有这样几种：

　　mousedown：按下

　　mouseup：  弹开

　　mouseout： 出去

　　mouseover：进入

　　mousemove: 移动

范例：鼠标触发事件

event.html

<!doctype html>

<html lang="zh-CN">

<head>

    <meta charset="utf-8">

    <meta name="description" content=event.html"">

    <meta name="keywords" content="event,html,js">

            <title>javascript的程序开发之事件处理</title>

    <script type="text/javascript" src="event.js"></script>

</head>

<body>

    <img src="data:images/1.jpg" id="mypic" style="width:200">

</body>

</html>

event.js

window.onload = function(){

    //为onload事件绑定处理

    document.getElementById("mypic").addEventListener("mousedown",function(){

    alert("鼠标的按下事件触发!");

},false)；

}

在图片里按下鼠标显示效果如下：

window.onload = function(){

    //为onload事件绑定处理

    document.getElementById("mypic").addEventListener("mouseup",function(){

    alert("鼠标的松开事件触发!");

　　},false)；

}

在图片里松开鼠标显示效果如下：

window.onload = function(){

    //为onload事件绑定处理

    document.getElementById("mypic").addEventListener("mouseover",function(){

    alert("鼠标的进入事件触发!");

    },false)；

}

在图片里鼠标离开显示效果如下：

window.onload = function(){

    //为onload事件绑定处理

    document.getElementById("mypic").addEventListener("mouseout",function(){

    alert("鼠标的离开事件触发!");

    },false)；

}

在图片里鼠标离开显示效果如下：

window.onload = function(){

    //为onload事件绑定处理

    document.getElementById("mypic").addEventListener("mousemove",function(){

    alert("鼠标的移动事件触发!");

},false)；

}

在图片里鼠标移动显示效果如下：

JavaScript：JavaScript事件的处理的更多相关文章

  1. jQuery $(document).ready()和JavaScript onload事件

    jQuery $(document).ready()和JavaScript onload事件 Why we need a right time? 对元素的操作和事件的绑定需要等待一个合适的时机,可以看 ...

  2. Javascript事件模型系列（四）我所理解的javascript自定义事件

    被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情,公司的个人的,搞的自己心烦意乱浮躁了一 ...

  3. javascript通用事件封装

    随着最近几年Html5的兴起,越来越多的应用采用html5进行实现,一个优秀的网页应用不但需要美观简洁的UI界面,更需要一个良好的交互.网页应用大部分的交互需要用javascript事件进行实现.虽然 ...

  4. javascript的事件

    前戏 今天在博客中看到了javascript的事件机制,就自己试试写一个简单的冒泡捕获测试,但是测试结果出乎了我的意料,主要是自己原来对事件了解不是很清楚,现在写篇博客记录下. 基础 先来看一下我在A ...

  5. javascript对象事件绑定方法

    javascript对象事件绑定方法 今天在做对象事件绑定的过程中出现了一点异外情况,由于事件方法是由参数传过来的,需要将当前对象call过去,方便方法体里直接调用this 错误写法 obj.oncl ...

  6. JavaScript的事件代理（转）

    如果你想给网页添加点JavaScript的交互性,也许你已经听过JavaScript的事件代理(event delegation),并且觉得这是那些发烧友级别的JavaScript程序员才会关心的什么 ...

  7. [转]javascript指定事件处理程序包括三种方式：

    javascript指定事件处理程序包括三种方式: (1):DOM0级事件处理程序 如: 代码如下: var btn=document.getElementById("mybtn" ...

  8. JavaScript中事件绑定的方法总结

    最近收集了一些关于JavaScript绑定事件的方法,汇总了一下,不全面,但是,希望便于以后自己查看. JavaScript中绑定事件的方法主要有三种: 1 在DOM元素中直接绑定 2 JavaScr ...

  9. JavaScript的事件监听、捕获和冒泡

    在前端开发中,我们经常需要对某些事件进行监听.这样只要在指定的元素上触发了该事件,就会执行一个回调函数来进行相关的操作. 而JavaScript中事件监听的方法总共有三种,分别如下: element. ...

  10. JavaScript 计时事件

    JavaScript 计时事件 通过使用 JavaScript,我们有能力作到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行.我们称之为计时事件. 在 JavaScritp 中使用计 ...

随机推荐

  1. html标签，格式控制标签，内容容器标签，超链接标签，图片标签，表格

    打开DREAMWEAVER,新建HTML,如下图: body的属性: bgcolor 页面背景色 background  背景壁纸.图片 text  文字颜色 topmargin  上边距 leftm ...

  2. 2015寒假ACM训练计划

    1月26号至3月4号 每天给自己一个计划.做有意义的事情,不要浪费时间. 8:00——11:30 acm训练 11:30——13:00 午休 13:00——17:30  acm训练 17:30——18 ...

  3. Silic PHP大马Cookie欺骗漏洞

    $password="ebd9a3c106064a255aaee28b6eb4f21c"; if($_COOKIE['admin_silicpass'] != md5($passw ...

  4. php 经典分页（推荐和laypage配合）

    学习地址:http://www.imooc.com/video/2463 <?php //(ps:推荐使用laypage整站式跳转来渲染分页按钮样式比较舒服http://laypage.layu ...

  5. Servlet 编程 http请求类型

    HTTP协议的8种请求类型介绍 HTTP协议中共定义了八种方法或者叫“动作”来表明对Request-URI指定的资源的不同操作方式,具体介绍如下: OPTIONS:返回服务器针对特定资源所支持的HTT ...

  6. 离线更新SEPM服务器的病毒定义库

    1. 从http://www.symantec.com/security_response/definitions/download/detail.jsp?gid=sep下载JDB文件    2. 将 ...

  7. org.apache.struts2.json.JSONWriter can not access a member of class

    偶遇一个问题:org.apache.struts2.json.JSONWriter can not access a member of class org.apache.tomcat.dbcp.db ...

  8. VR制作的规格分析

    因为UE4的演示资源更丰富一些,我这边把UE4的有代表性的演示都跑了一遍,同时也通过Rift确认效果,和里面的资源制作方式.   首先,UE4是基于物理渲染的引擎,大部分都是偏向图像真实的.使用的材质 ...

  9. PHP date函数参数详解

    PHP date函数参数详解 作者: 字体:[增加 减小] 类型:转载       time()在PHP中是得到一个数字,这个数字表示从1970-01-01到现在共走了多少秒,很奇怪吧 不过这样方便计 ...

  10. FloodLight使用感受

    一个使用java语言编写的基于Openflow协议的SDN控制器. 基本架构同webserver一样,有一个维护交换机连接信息的底层模块,当有交换机同控制器连接时,floodlight会将此连接保存到 ...