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. kail-linux 安全之旅

    一些学习网站 http://xiao106347.blog.163.com/blog/static/2159920782013111995945233/ http://xiao106347.blog. ...

  2. lucene 3.0.2 基本操作入门

    转自:Bannings http://blog.csdn.net/zhangao0086/article/details/ 我们为什么需要Lucene? 任何的的查询功能都类似,都是对文本内容的搜索, ...

  3. Java判断一个时间是否在另一个时间段内

    需求:当时间在凌晨0点至0点5分之间程序不执行. 也就是实现判断当前时间点是否在00:00:00至00:05:00之间 方法: Java代码 : /** * 判断时间是否在时间段内 * * @para ...

  4. 移动Web应用开发入门指南——交互篇

    交互篇 从PC到移动端,视觉和交互是用户能直接感受到的差异.在视觉篇中已经提到,移动设备的物理属性一部分影响到视觉,另外一些部分将影响到交互.那么,移动设备影响交互的物理属性都有哪些变化呢?对于这个问 ...

  5. php运行模式的比较（转）

    PHP运行模式有4钟:1)cgi 通用网关接口(Common Gateway Interface))2) fast-cgi 常驻 (long-live) 型的 CGI3) cli  命令行运行   ( ...

  6. 【转】Html页面结构范例

    原文地址:http://www.51testing.com/html/38/225738-220986.html · HTML · HEAD · LINK ... CSS files required ...

  7. mysql varchar类型使用心得

    自己的一个例子,在存储一个email的需求中.mysql定义的字段,类型:varchar 长度:20 当我插入一个email:huangyuande@sailvan.com  发现怎么样都差不进去.. ...

  8. 使用CodeIgniter框架搭建RESTful API服务

    使用CodeIgniter框架搭建RESTful API服务 发表于 2014-07-12   |   分类于 翻译笔记   |   6条评论 在2011年8月的时候,我写了一篇博客<使用Cod ...

  9. SHELL 中的重定向和管道

    1. 什么叫重定向将输入或输出重新指定到别的位置. 2. 重定向输出2.1.命令执行数据流文件/设备---- 标准输入 -->命令 --- 标准输出 -->文件/设备            ...

  10. Unknown collation: 'utf8mb4_unicode_ci'

    日前给一个政府机关做个小的门户网站,用的是wordpress+主题开发,部署时发现导入数据库sql文本时出现Unknown collation: 'utf8mb4_unicode_ci'的错误,查了下 ...