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. [ZT] 酒店大洗脑：最全各大国际酒店集团族谱图

    原文地址: http://www.licai.com/yuedu/201411-62884.html 如果你对各大耳熟能详的国际酒店管理集团还有什么问题,相信今天和你分享的各大酒店集团家族系谱图和最全 ...

  2. JavaWEB中读取配置信息

    第一种方法是使用java.io和java.util包,缺点是路径的概念要清晰, 例子: Properties prop = new Properties(); InputStream in = get ...

  3. OC学习笔记——类别(Category)

    类别,有些程序员又称之为分类. 类别是一种为现有的类添加新方法的方式,尤其是为系统的做扩展的时候,不用继承系统类,可以直接为类添加新的方法.也可以覆盖系统类的方法. 如: @interface NSO ...

  4. ci实现RBAC，详细解释原理和核心代码显示

    代码实现不复杂,主要是思路的理解 RBAC是基于权限控制 1.权限结点管理 2.角色管理 3.管理员权限分配 结点管理就是把所有的分组 控制器 方法全部写入一个结点管理表 请注意在写一个动作比如,展示 ...

  5. PHP 文件系统管理函数与 preg_replace() 函数过滤代码

    案例:在带行号的代码至文件 crop.js 中.用两种方法去掉代码前面的行号,带行号的代码片段: 1.$(function(){ 2. //初始化图片区域 3. var myimg = new Ima ...

  6. ExtJS笔记2 Class System

    For the first time in its history, Ext JS went through a huge refactoring from the ground up with th ...

  7. RT-Thread 线程调度

    /* 变量分配4字节对齐 */ ALIGN(RT_ALIGN_SIZE) /* 静态线程的 线程堆栈*/ ]; ]; /* 静态线程的 线程控制块 */ static struct rt_thread ...

  8. 关于jQuery学习

    ≡[..]≡≡[..]≡ 所有的实例都位于document.ready里面--为了防止文档在未完全加载之前就运行函数导致操作失败. $(document).ready(function(){ --- ...

  9. VS C++ 从一个窗口创建另一个窗口

    一.在stdafx.h文件中,添加: #include "Form2.h" / stdafx.h : 标准系统包含文件的包含文件, // 或是经常使用但不常更改的 // 特定于项目 ...

  10. 【转】设计模式 ( 十五 ) 中介者模式Mediator（对象行为型）

    设计模式 ( 十五 ) 中介者模式Mediator(对象行为型) 1.概述 在面向对象的软件设计与开发过程中,根据"单一职责原则",我们应该尽量将对象细化,使其只负责或呈现单一的职 ...