javascript中的事件问题
事件的类型：
(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中的事件问题的更多相关文章
- javascript 中的事件机制
1.javascript中的事件. 事件流 javascript中的事件是以一种流的形式存在的. 一个事件会也有多个元素同时响应. 有时候这不是我们想要的效果, 我们只是需要某个特定的元素相应我们的绑 ...
- JavaScript中的事件对象
JavaScript中的事件对象 JavaScript中的事件对象是非常重要的,恐怕是我们在项目中使用的最多的了.在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含这所有与事件有 ...
- JavaScript 进阶教程一 JavaScript 中的事件流 - 事件冒泡和事件捕获
先看下面的示例代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Jav ...
- 了解javascript中的事件（二）
本文目录如下: 零.寒暄 一.事件的分类 二.事件代理 2.1 问题引出 2.2 什么是事件代理 2.3 完整示例 二.事件代理 三.事件代理思想的用处 四.总结 零.寒暄 这篇博客本该出现在两个月以 ...
- javascript中onclick事件能调用多个方法吗
Q: javascript中onclick事件能调用多个方法吗? A: 可以的,方法如下onclick="aa();bb();cc();"每个方法用“;”分号隔开就行了
- 深入理解javascript中的事件循环event-loop
前面的话 本文将详细介绍javascript中的事件循环event-loop 线程 javascript是单线程的语言,也就是说,同一个时间只能做一件事.而这个单线程的特性,与它的用途有关,作为浏览器 ...
- js实例分析JavaScript中的事件委托和事件绑定
我们在学习JavaScript中,难免都会去网上查一些资料.也许偶尔就会遇到“事件委托”(也有的称我“事件代理”,这里不评论谁是谁非.以下全部称为“事件委托”),尤其是在查JavaScript的事件处 ...
- java基础66 JavaScript中的事件、localtion对象、screen对象（网页知识）
1.JavaScript中的事件注册 1.1.事件的注册方式 方式1:直接在html元素上注册 <body onLoad="ready()"></body > ...
- JavaScript中的事件委托机制跟深浅拷贝
今天聊下JavaScript中的事件委托跟深浅拷贝 事件委托 首先呢,介绍一下事件绑定 //方法一:通过onclick <button onclick="clickEvent()&qu ...
- JavaScript中的事件循环机制跟函数柯里化
一.事件循环机制的理解 test();//按秒输出5个5 function test() { for (var i = 0; i < 5; i++) { setTimeout(() => ...
随机推荐
- 台积电16nm工艺为什么好过三星14nm
最近,关于iPhone6s A9处理器版本的事情的话题很热,最后都闹到苹果不得不出来解释的地步,先不评判苹果一再强调的整机综合续航差2~3%的准确性,但是三星14nm工艺相比台积电16nm工艺较差已经 ...
- 怎么给qt程序添加版本信息
windows下的可执行文件的属性中有版本这个信息,她含有版本信息,描述,版权等等.对于qt的程序,要含有这样的信息,该怎么办呢?那就如下操作吧:新建***.rc文件,在rc文件填入下的信息 #if ...
- 关于pthread里面一些函数的使用心得！
第一次使用pthread,遇到的问题还真不少,现在我一一记录一下: 1.关于编译时出现 对‘pthread_create’未定义的引用 之类的错误的解决:由于pthread库不是Linux系统默认的库 ...
- 【HDOJ】1561 The more, The Better
树状DP. /* 1561 */ #include <iostream> #include <cstdio> #include <cstring> #include ...
- POJ 2391 容牛问题
题目大意:给定一个无向图,点i处有Ai头牛,点i处的牛棚能容纳Bi头牛,求一个最短时间T使得在T时间内所有的牛都能进到某一牛棚里去.(1 <= N <= 200, 1 <= M &l ...
- bzoj3573[Hnoi2014]米特运输
http://www.lydsy.com/JudgeOnline/problem.php?id=3573 好吧,虽然这是day1最后一题,但却是最水的一题....(前提:看懂题目) 仔细看题! 仔细看 ...
- Java---多线程之死锁
★ 死锁的两种情况: 简单的说下单块cpu运行多线程的情况: 大家可能平时玩电脑,可以同时挂QQ啊,玩游戏啊,打开文本啊,等等.这里,我们假设是单块cpu.也就是俗称的单核cpu. 大家可能会觉得这些 ...
- PHP IDE 框架 服务器 相关
server:nginx 框架:一个比较老的项目用的ZendFramework,最近的新项目用的codeigniter IDE: zend studio Sublime Text https: ...
- Understanding the Android Life Cycle
Problem Android apps do not have a “main” method; you need to learn how they get started and how the ...
- 关于FIN_WAIT1
前些天,一堆人在 TCPCopy 社区里闲扯蛋,有人提了一个问题:FIN_WAIT1 能持续多久?引发了一场讨论,期间我得到斌哥和多位朋友的点化,受益良多. 让我们热热身,通过一张旧图来回忆一下 TC ...