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. c++模版函数

    1.定义 可以使用class或者typename字段来申明 template <class T> template <class T1, class T2, ...class TN& ...

  2. maven 将依赖的jar包打入jar包中

    pom中加入以下代码,利用mvn assembly:assembly就可以了. <build> <plugins> <plugin> <artifactId& ...

  3. cookie 换肤

    jquery.Cookies.js /** * Cookie plugin * * Copyright (c) 2006 ziqiu.zhang * Dual licensed under the M ...

  4. Windows 8.1/2012R2在脱机模式下安装.NET Framework 3.5

    Windows 8.1   1. 插入 Windows 8 DVD 或装载 ISO 映像.在E:\sources\sxs文件夹中找到此功能的源.(本例中为E:\用户的用户已在其加载 Windows 8 ...

  5. JAVA WEB 的JSP(9*9乘法表+*型金字塔)

    运行环境及工具: (Tomcat7) + (JAVA JDK)+ (Eclipse for J2EE) 输出9*9乘法表 代码片段的练习 增加一些简单的JS功能 <%@ page import= ...

  6. FZU 1018 枚举dp

    题意 给出一个数字组成的立方体 在其中选取一个体 使这个体中的数字之和最小 不可以不选 fzu的题目分类动态规划里面不是按难度排得 是按照题号..记得以前做题碰到过算 矩阵里面求子矩阵的最大和的 不会 ...

  7. [ZZ] HDR&ToneMapping

    http://blog.csdn.net/toughbro/article/details/6745207 float游戏存储照片blogimage HDR high dynamic range. 很 ...

  8. cURL 学习笔记与总结（2）网页爬虫、天气预报

    例1.一个简单的 curl 获取百度 html 的爬虫程序(crawler): spider.php <?php /* 获取百度html的简单网页爬虫 */ $curl = curl_init( ...

  9. thinkphp开发技巧经验分享

    thinkphp开发技巧经验分享 www.111cn.net 编辑:flyfox 来源:转载 这里我给大家总结一个朋友学习thinkphp时的一些笔记了,从变量到内置模板引擎及系统变量等等的笔记了,同 ...

  10. 不遗留问题-menu数据拼装

    DROP TABLE IF EXISTS `menu0910`; CREATE TABLE `menu0910` ( `id` ) NOT NULL AUTO_INCREMENT, `menu` ) ...