事件的类型:

(1)鼠标事件:  

click用户点击鼠标时发生,当用户的焦点在按钮上,并按了回车键,同样会触发这个事件

dbclick 用户双击鼠标左键时发生    mouseover 鼠标移出某个元素到另一个元素身上发生

mouseout鼠标指针在某个元素上,且用户正要将其移除元素的边界时发生

mousedown用户点击任意一个按钮时发生

mouseup用户松开任意一个按钮时发生

contextmenu 弹出右键菜单。

事件的属性:每个鼠标事件都会给以下event对象的属性填入值

1)坐标属性:(clientX 和clientY等)

2)type属性

3)target属性(DOM)或者srcElement(IE)属性

4)shiftKey ,ctrlKey  ,altKey , metaKey(DOM)属性

5)button属性(只在mouse*系列中出现)

<p>Use your mouse to click and double click the red square</p> <div style="width:100px; height:100px; "

onmouseover="handleEvent(event)"

onmouseout="handleEvent(event)"

onmousedown="handleEvent(event)"

onmouseup="handleEvent(event)"

onclick="handleEvent(event)"

ondblclick="handleEvent(event)"

id="div1"></div>

<p><textarea id="txt1" rows="15" cols="50"></textarea></p>

//onmousemove、onmouseout改变图片外观的流行方法

<img src="1.jpg" onmousemove="this.src='2.jpg'" onmouseout="this.src='1.jpg'" />

//获取鼠标的位置

<script>

var getCoordInDocument = function(e){

e = e || window.event;

var x = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));

var  y = e.pageY ||(e.clientY + (document.documentElement.scrollTop || documwent.body.scrollTop));

return {'x':x,'y':y};

}

<script>

mouseover,mousemove,mouseout没有什么好说,并且无浏览器差异。我们来看鼠标滚轮事件,这个差异很严重。IE、Safari、 Opera 、chrome是mousewheel事件,Firefox是DOMMouseScroll事件。事件属性方面,IE等是event.detail,Firefox是event. wheelDelta。IE等往上滚一圈为120,往下滚一圈为-120。Firefox往上滚一圈为-3,往下滚一圈为3。我们可以构造一个函数来削除它们的差异。

var mouseScroll = function(fn){
 var roll = function(){
  var delta = 0,
  e = arguments[0] || window.event;
  delta = (e.wheelDelta)?e.wheelDelta / 120 : -(e.detail || 0) / 3;
  fn(delta);  //回调函数中的回调函数
 }
 if(window.netscape){
  document.addEventListener('DOMMouseScroll',roll,false);
 }else{
  document.onmousewheel = roll;
 }
}

此函数接受一函数作为参数,如:
 
mouseScroll(function(delta){
  var obj = document.getElementById('scroll'),
  current = parseInt(obj.offsetTop)+(delta*10);
  obj.style.top = current+"px";
});

实例检测:请用鼠标滚轮移动方块

<script type="text/javascript">

var $ = function(id){ return document.getElementById(id)}

window.onload = function(){

mouseScroll(function(delta){

var obj = $('scroll'),

current = parseInt(obj.offsetTop)+(delta*10);

obj.style.top = current+"px";     });

}

var mouseScroll = function(fn){

var roll = function(){

var delta = 0,

e = arguments[0] || window.event;

delta = (e.wheelDelta) ? e.wheelDelta / 120 : -(e.detail || 0) / 3;

fn(delta);//回调函数中的回调函数

}     if(window.netscape ){

document.addEventListener('DOMMouseScroll', roll, false);

}

else{

document.onmousewheel = roll;

}   }

</script>

<style title="text/css">

#scroll {

color:#fff;

background:#369;

width:70px;

height:70px;

position:absolute;

left:500px;

top:200px;

}

</style>

<body>

<div id="scroll">请用鼠标滚轮移动方块</div>

</body>

(2)键盘事件:

keydown用户在键盘上按下某键时发生,一直按着,会不断触发

keyup 用户释放按着的键盘时发生

keypress 用户按下一个按键,并产生一个字符时发生(不管是shift还是Ctrl 还是alt之类的键)

事件的属性:对每个键盘,会填入以下的属性:

1)keyCode属性

2)charCode属性(仅DOM)

3)target属性(DOM)或者srcElement(IE)属性

4)shiftKey ,ctrlKey  ,altKey , metaKey(DOM)属性

javascript事件主要通过以下三个事件来捕获键盘事件:onkeydown,onkeypress与onkeyup。该三个事件的执行顺序如下:onkeydown -> onkeypress ->onkeyup。在一般情况下,采用三种键盘事件均可对键盘输入进行有效的响应。当在实际使用中,会发现这几者有些不同的差别。

onkeypress事件不能对系统功能键(例如:后退、删除等,其中对中文输入法不能有效响应)进行正常的响应,onkeydown和onkeyup均可以对系统功能键进行有效的拦截,但事件截获的位置不同,可以根据具体的情况选择不同的键盘事件。

由于onkeypress不能对系统功能键进行捕获,导致window.event对象的keyCode属性和onkeydown,onkeyup键盘事件中获取的keyCode属性不同,主要表现在onkeypress事件的keyCode对字母的大小写敏感,而onkeydown、onkeyup事件不敏感;onkeypress事件的keyCode无法区分主键盘上的数字键和副键盘数字键的,而onkeydown、onkeyup的keyCode对主副键盘的数字键敏感。

(3)跨平台事件:

EventUtil对象:

无论何时要创建可用在同一个任务中的多个函数,最好创建一个管理他们的容器对象,EventUtil对象是这里所有与事件相关的函数定义的容器,因为没有属性且只需这个对象的一个实例,所以没有必要定义一个类:

var EventUtil = new Object;

<!DOCTYPE html> <html> <head lang="en">

<meta charset="UTF-8">

<title>跨平台的事件</title>

<script type="text/javascript">

var EventUtil = new Object;

EventUtil.addEventHandler = function(oTarget,sEventType,fnHandler){

//addEventListener()方法有三个参数:要分配事件处理函数的对象,要处理的事件的名称以及要分配的函数

//针对支持啊等等addEventListener()方法的dom兼容的浏览器,并且最后后一个参数是false表示在冒泡阶段

if(oTarget.addEventListener){

oTarget.addEventListener(sEventType,fnHandler,false);

//对IE的attachEvent()方法的特征检测 其第一个参数接受的是事件处理函数的名字而不是事件类型的名字

}else if(oTarget.attachEvent){

oTarget.attachEvent("on" + sEventType,fnHandler);

//针对的是其他浏览器

}else{

oTarget["on" +sEventType] = fnHandler;

}

};

EventUtil.removeEventHandler = function (oTarget,sEventType,fnHandler) {

if(oTarget,addEventListener){

oTarget.addEventHandler(sEventType,fnHandler,false);

}else if(oTarget.attachEvent){

oTarget.attachEvent("on" + sEventType,fnHandler);

}else{

oTarget["on"+sEventType] = null;

}

};

function handleClick(){

alert("Click!");

var oDiv = document.getElementById("div1");

EventUtil.removeEventHandler(oDiv,"click",handleClick);

}     window.onload = function(){

var oDiv = document.getElementById("div1");

eventUtil.addEventHandler(oDiv,"click",handleClick);

}

</script>

</head>

<body>

<div id="div1" style="width: 100px; height: 100px">

</div>

</body>

</html>

javascript中的事件问题的更多相关文章

  1. javascript 中的事件机制

    1.javascript中的事件. 事件流 javascript中的事件是以一种流的形式存在的. 一个事件会也有多个元素同时响应. 有时候这不是我们想要的效果, 我们只是需要某个特定的元素相应我们的绑 ...

  2. JavaScript中的事件对象

    JavaScript中的事件对象 JavaScript中的事件对象是非常重要的,恐怕是我们在项目中使用的最多的了.在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含这所有与事件有 ...

  3. JavaScript 进阶教程一 JavaScript 中的事件流 - 事件冒泡和事件捕获

    先看下面的示例代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Jav ...

  4. 了解javascript中的事件(二)

    本文目录如下: 零.寒暄 一.事件的分类 二.事件代理 2.1 问题引出 2.2 什么是事件代理 2.3 完整示例 二.事件代理 三.事件代理思想的用处 四.总结 零.寒暄 这篇博客本该出现在两个月以 ...

  5. javascript中onclick事件能调用多个方法吗

    Q: javascript中onclick事件能调用多个方法吗? A: 可以的,方法如下onclick="aa();bb();cc();"每个方法用“;”分号隔开就行了

  6. 深入理解javascript中的事件循环event-loop

    前面的话 本文将详细介绍javascript中的事件循环event-loop 线程 javascript是单线程的语言,也就是说,同一个时间只能做一件事.而这个单线程的特性,与它的用途有关,作为浏览器 ...

  7. js实例分析JavaScript中的事件委托和事件绑定

    我们在学习JavaScript中,难免都会去网上查一些资料.也许偶尔就会遇到“事件委托”(也有的称我“事件代理”,这里不评论谁是谁非.以下全部称为“事件委托”),尤其是在查JavaScript的事件处 ...

  8. java基础66 JavaScript中的事件、localtion对象、screen对象(网页知识)

    1.JavaScript中的事件注册 1.1.事件的注册方式 方式1:直接在html元素上注册 <body onLoad="ready()"></body > ...

  9. JavaScript中的事件委托机制跟深浅拷贝

    今天聊下JavaScript中的事件委托跟深浅拷贝 事件委托 首先呢,介绍一下事件绑定 //方法一:通过onclick <button onclick="clickEvent()&qu ...

  10. JavaScript中的事件循环机制跟函数柯里化

    一.事件循环机制的理解 test();//按秒输出5个5 function test() { for (var i = 0; i < 5; i++) { setTimeout(() => ...

随机推荐

  1. ES Head is not working with elasticsearch-1.4.0.Beta1

    ES Head is not working with elasticsearch-1.4.0.Beta1: https://github.com/elastic/elasticsearch/issu ...

  2. cf D. Vessels

    http://codeforces.com/contest/371/problem/D 第一遍写的超时了,然后看了别人的代码,思路都是找一个点的根,在往里面加水的时候碗中的水满的时候建立联系.查询的时 ...

  3. java实现DES加密与解密,md5加密

    很多时候要对秘要进行持久化加密,此时的加密采用md5.采用对称加密的时候就采用DES方法了 import java.io.IOException; import java.security.Messa ...

  4. 7.5 Point-in-Time (Incremental) Recovery Using the Binary Log 使用binay log 基于时间点恢复

    7.5 Point-in-Time (Incremental) Recovery Using the Binary Log 使用binay log 基于时间点恢复 7.5.1 Point-in-Tim ...

  5. !!!全球最流行开源硬件平台!不知道就OUT了!

    全球最流行的几个开源硬件平台!不知道就OUT了! 随着物联网的推广和普及,五年内全球会有200亿台智能设备的需求,而如今随着创客概念的兴起,开源硬件也越加的火热,让我们来看看现在都有哪些主流的开源硬件 ...

  6. -_-#【Angular】工具函数

    AngularJS学习笔记 上下文绑定 var f = angular.bind({a: 'xx'}, function() { console.log(this.a) }) f() // 'xx' ...

  7. 维基百科上—数据仓库、数据挖掘、OLAP三者之间的区别

    数据仓库可以作为数据挖掘和OLAP等分析工具的资料来源,由于存放于数据仓库中的资料,必需经过筛选与转换,因此可以避免分析工具使用错误的资料,而得到不正确的分析结果. 数据挖掘和OLAP同为分析工具,其 ...

  8. POJ 1287 Networking

    题目链接: poj.org/problem?id=1287 题目大意: 你被分派到去设计一个区域的连接点,给出你每个点对之间的路线,你需要算出连接所有点路线的总长度. 题目输入: 一个数字n  代表有 ...

  9. perl中执行linux命令,及其区别

    1. system("date '+%Y-%m-%d %H:%M:%S'") 该命令返回的是-1.(应该是date命令的main函数的返回值) 2. `date '+%Y-%m-% ...

  10. SpringMVC+SwfUpload进行多文件同时上传

    由于最近项目需要做一个多文件同时上传的功能,所以好好的看了一下各种上传工具,感觉uploadify和SwfUpload的功能都比较强大,并且使用起来也很方便.SWFUpload是一个flash和js相 ...