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. Highcharts 本地导出图片 Java

    下载的Highcharts-2.3.5.zip 解压后 有 E:\Highcharts\Highcharts-2.3.5\exporting-server\java 目录 提供了Java实现的导出应用 ...

  2. edtftpj让Java上传FTP文件支持断点续传

    在用Java实现FTP上传文件功能时,特别是上传大文件的时候,可以需要这样的功能:程序在上传的过程中意外终止了,文件传了一大半,想从断掉了地方继续传:或者想做类似迅雷下载类似的功能,文件太大,今天传一 ...

  3. javascript获取随机数的几种方式

    //获取0-num的随机数 function randomNum(num){ return Math.floor(Math.random()*num); } //获取start-end的随机数 fun ...

  4. 如何把in_array 的第三个参数strict设置为 true

    var_dump(in_array(0, array('s' )); 这句话的结果是bool(true). 因为in_array会将0 和's' 进行比较,0是number类型,'s'是string类 ...

  5. SVN版本管理系统的安装 CentOS + Subversion + Apache + Jsvnadmin

    CI服务器:192.168.4.221 root用户操作                            建议安装前更新操作系统 # yum update 更新完成后重启 # reboot 安装 ...

  6. POJ 1088 滑雪（记忆化搜索）

    滑雪 Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 92384   Accepted: 34948 Description ...

  7. SwfUpload学习记录

    参考资料: SWFUpload 2.5.0版 官方说明文档 中文翻译版 了解SWFUpload 多文件上传配置详解 WEB版一次选择多个文件进行批量上传(swfupload)的解决方案 jQuery轻 ...

  8. angJs使选中的li背景颜色不同

    <!doctype html><html><head><meta charset="UTF-8"><title>test ...

  9. [转]在VS2010 VC++项目中引用Lib静态库（以Openssl为例）

    本文转自:http://kb.cnblogs.com/page/94467/ Openssl是个为网络通信提供安全及数据完整性的一种安全协议,囊括了主要的密码算法.常用的密钥和证书封装管理功能以及SS ...

  10. twitter storm 源码走读之5 -- worker进程内部消息传递处理和数据结构分析

    欢迎转载,转载请注明出处,徽沪一郎. 本文从外部消息在worker进程内部的转化,传递及处理过程入手,一步步分析在worker-data中的数据项存在的原因和意义.试图从代码实现的角度来回答,如果是从 ...