JavaScript之事件对象
2013-12-26 10:42
141 查看
基于不同浏览器开发的开发人员都知道,获取事件信息是很重要的。所以,会创建包含关于刚刚发生的事件的信息事件对象,包含的信息如下:引起事件的对象;事件发生时鼠标的信息;事件发生时键盘的信息;事件对象只在发生事件时才被创建,且只有事件处理函数才能访问。所有事件处理函数执行完毕后,事件对象就被销毁。
(一) 定位
在IE中,事件对象是window对象的一个属性event。也就是说,事件处理函数必须这样访问事件对象:
oDiv.onclick=function(){
var oEvent=window.event;
}
尽管它是window对象的属性,event对象还是只能在事件发生时访问。所有的事件处理函数执行完毕后,事件对象就被销毁。
DOM标准规则说,event对象必须作为唯一的参数传给事件处理函数。所以,在DOM兼容的浏览器中访问事件对象,要这么做:
oDiv.onclick=function(){
var oEvent=arguments[0];
}
当然,可直接命名参数,访问就方便:
oDiv.onclick=function(oEvent){
}
(二) 属性/方法
1、 IE 下面是IE中事件的属性和方法:
2、 DOM DOM事件对象包含了相似的核心属性和方法,但也有很大的不同。下表逐个列出:
(三) 相似性
下面是对两种事件对象相似方面的总结
1、 获取事件类型 这样可在任何一种浏览器获取事件的类型: var sType=oEvent.type; 它返回类似”click”和”mouseover”之类的值,当某个函数同时为两个事件处理函数时,很有用。 Function handleEvent(oEvent){ If(oEvent.type == ‘click’){ alert(“Clicked”); }else if(oEvent.type
==’mouseover’){ alert(“Mouse Over!”); } } oDiv.onclick=handleEvent; oDiv.onmouseover=handleEvent; 在这段代码中,将函数handleEvent()分配给click和mouseover事件,作为它们的事件处理函数。在函数中,type属性可用来判断该采取何种行动。
2、 获取按钮代码(keydown/keyup事件) 在keydown或者keyup事件中,可使用keyCode属性获取按下的按键的数值代码: var iKeyCode=oEvent.keyCode; keyCode属性总包含代表按下键的一个代码,它可能代表一个字符,也可能不是。例如, Enter键的keyCode为13,空格键的keyCode为32,回退(backSpace)键的keyCode为8。
3、 检测Shift、Alt、Ctrl键 要检测Shiftp、Alt、Ctrl键是否被按下,IE和DOM都可以使用以下代码: var bShift=oEvent.shiftKey; var bAlt=oEvent.altKey; var bCtrl=oEvent.ctrlKey; 这里面每个属性都包含一个表示按钮是否被按下的Boolean值(这几个按键都会触发Keydown事件,然后即可获取它的keyCode)。
4、 获取客户端坐标 在鼠标事件中,可用clientX和clientY属性获取鼠标指针在客户端区域的位置: var iClientX=oEvent.clientX; var iClientY=oEvent.clientY; 客户端区域是显示网页的窗口部分。这些属性描述鼠标在该区域内位置离边界有多远(单位是像素)。
5、 获取屏幕坐标 在鼠标事件中,可用screenX和screenY属性来获取鼠标指针在计算机屏幕中的 var isScrennX=oEvent.screenX; var isScrennY=oEvent.screenY; 这两个属性都返回表示离用户屏幕的边界有多少个像素的整数。
(四) 区别
IE和DOM的属性并不是每样都很相似。
1、 获取目标 位于事件中心的对象称为目标。假设为<di/>元素分配onclick事件处理函数。触发click事件时,<div/>就被认为是目标。 在IE中,目标包含在event对象的srcElement属性中: var oTarget=oEvent.srcElemtn; 在DOM兼容的浏览器,目标包含在target属性中: var oTarget=oEvent.target; IE目标只能是元素、文档或者窗口;DOM兼容的浏览器也允许把文本节点作为目标。
2、 获取字符代码 你看到了IE和DOM都支持event对象的keyCode属性,它会返回按下按键的数值代码。 如果按键代表一个字符(非Shift、Ctrl、Alt等),IE的keyCode将返回字符的代码(等于它的Unicode值): var iCharCode=oEvent.keyCode; 在ODM兼容的浏览器,按钮的代码和字符会有一个分离。要获取字符代码,使用charCode属性: var
iCharCode=oEvent.CharCode; 然后可用这个值来获取实际的字符,只要使用String.fromCharCode()字符: var sChar=String.fromCharCode(oEvent.charCode); 如果不确定按下的按钮是否包含字符,则可使用isChar属性来进行判断: Is(oEvent.isChar){ var isCharCode=oEvent.charCode; }
3、 阻止某个事件的默认行为 在IE中要阻止某个事件的默认行为,必须将returnValue属性设置为false; oEvent.returnValue=false; 而在Mozilla中,只要调用preventDefault()方法:oEvent.preventDefault(); 某些情况下阻止事件默认行为是十分有用的:第一,当用户右键页面时,阻止他使用上下文菜单。你要阻止contextmenu事件的默认行为就可以了,就这样做:
document.body.contextmenu=function(oEvent){ if(isIE){ oEvent=window.event; oEvent.returnValue=false; }else{ oEvent.preventDefault(); } } 第二,你可能还想在文本框键入字符时,阻止它的默认行为,以禁止特定字符的输入或者推行阻止鼠标的动作,除非满足特定的条件。
4、 停止事件复制(冒泡) 在IE中,要阻止事件进一步冒泡,必须设置cancelBubble属性为true: oEvent.cancelBubble=true; 在mozilla中,只需要调用stopPropagation()方法: oEvent.stopPropagation(); 停止事件复制可以阻止事件流中的其他对象的事件处理函数的执行。
考虑下面的例子:
<html onclick=”alert(‘html’)”>
<head>
<title>事件阻止例子</title>
</head>
<body onclick=”alert(‘body’)”>
<input type=”button” value=”Click me” onclick=”alert(‘input’)” />
</body>
</html>
点击页面上的按钮,会顺序出现三个警告框:”input”、”body”、”html”。这是因为事件先从<input/>元素冒泡到<body/>,然后又到<html/>。然而,如果在按钮处停止事件复制,情况就变了:
<html onclick=”alert(‘html’)”>
<head>
<title>事件阻止例子</title>
<script type=”text/javascript”>
Function handleClick(oEvent){
alert(“input”);
if(isIE){
oEvent.cancelBubble=true;
}else{
oEvent.stopPropagation();
}
}
</script>
</head>
<body onclick=”alert(‘body’)”>
<input type=”button” value=”Click me” onclick=”handleClick(event)” />
</body>
</html>
执行此例子后,点击按钮,你将只能看到”input”警告框,其他的都没有,因为事件的复制被停止。为能正确实现,还需要使用前一章的浏览器检测代码。 你可能还注意到,<input/>元素将event对象作为参数传送给handleClick()函数。这在任何浏览器都是可执行的。因为一旦发生事件,就会创建event对象,且这时是一个全局变量。
(一) 定位
在IE中,事件对象是window对象的一个属性event。也就是说,事件处理函数必须这样访问事件对象:
oDiv.onclick=function(){
var oEvent=window.event;
}
尽管它是window对象的属性,event对象还是只能在事件发生时访问。所有的事件处理函数执行完毕后,事件对象就被销毁。
DOM标准规则说,event对象必须作为唯一的参数传给事件处理函数。所以,在DOM兼容的浏览器中访问事件对象,要这么做:
oDiv.onclick=function(){
var oEvent=arguments[0];
}
当然,可直接命名参数,访问就方便:
oDiv.onclick=function(oEvent){
}
(二) 属性/方法
1、 IE 下面是IE中事件的属性和方法:
特征/方法 | 类型 | 可读/可写 | 描述 |
altKey | Boolean | R/W | true表示按下ALT键,false表示没有 |
button | Interger | R/W | 对于特定的鼠标事件,表示按下的鼠标按钮:0——未按下按钮1——按下左键2——按下右键3——同时按下左右按钮4——按下中键5——按下左键和中键6——按下右键和中键7——同时按下左中右键 |
cancelBubble | Boolean | R/W | 开发人员将其设为true时,将会停止事件向个冒泡 |
ClientX | Integer | R/W | 事件发生时,鼠标在客户端区域的(不包含工具栏、滚动条等)的X坐标 |
ClientY | Integer | R/W | 事件发生时,鼠标在客户端区域(不包含工具栏、滚动条等)的Y坐标 |
ctrlKey | Boolean | R/W | true表示按下的CTRL键,false表示没有 |
fromElement | Element | R/W | 某些鼠标事件中,鼠标所离开的元素 |
keyCode | Integer | R/W | 对于keypress事件,表示按钮的Unicode字符;对于keydown/keyup事件,表示按下按钮的数字代号 |
offsetX | Integer | R/W | 鼠标相对于引起事件的对象的X坐标 |
offsetY | Integer | R/W | 鼠标相对于引起事件的对象的Y坐标 |
repeat | Boolean | R/W | 如果不断触发keydown事件,则为true,否则为false |
returnValue | Boolean | R/W | 开发人员将其设置为false以取消事件的默认动作 |
screenX | Integer | R/W | 相对于整个计算机屏幕的鼠标x坐标 |
screenY | Integer | R/W | 相对于整个计算机屏幕的鼠标y坐标 |
shiftKey | Boolean | R/W | true表示按下shift键,否则为false |
srcElement | Element | R/W | 引起事件的元素 |
toElement | Element | R/W | 在鼠标事件中,鼠标正在进入的元素 |
type | String | R/W | 事件的名称 |
x | Integer | R/W | 鼠标相对于引起事件的元素的父元素的x坐标 |
y | Integer | R/W | 鼠标相对于引起事件的元素的父元素的y坐标 |
特征/方法 | 类型 | 可读/可写 | 描述 |
altKey | Boolean | R/W | true表示按下ALT键,false表示没有 |
bubbles | Boolean | R | 表示事件是否正在冒泡阶段中 |
button | Integer | R/W | 对于特定的鼠标事件,表示按下的鼠标按钮:0——未按下按钮1——按下左键2——按下右键3——同时按下左右按钮4——按下中键5——按下左键和中键6——按下右键和中键7——同时按下左中右键 |
cancelable | Boolean | R | 表示事件能否取消 |
cancelBubble | Boolean | R | 表示事件冒泡是否已被取消 |
charCode | Boolean | R | 按下的按键的Unicode值 |
ClientX | Integer | R | 事件发生时,鼠标在客户端区域的(不包含工具栏、滚动条等)的X坐标 |
ClientY | Integer | R | 事件发生时,鼠标在客户端区域(不包含工具栏、滚动条等)的Y坐标 |
ctrlKey | Boolean | R | true表示按下的CTRL键,false表示没有 |
currentTarget | Element | R/W | 事件目前所指向的元素 |
detail | Integer | R | 鼠标按钮点击的次数 |
eventPhase | Integer | R | 事件的阶段,可能是以下的值中的一个:0——捕获阶段1——在目标上2——冒泡阶段 |
isChar | Boolean | R | 表示按下的的按键是否有字符与之相关 |
keyCode | Integer | R/W | 表示按下按钮的数字代号 |
metaKey | Integer | R/W | 表示META键是否被按下 |
pageX | Integer | R | 鼠标相对于页面的X坐标 |
pageY | Integer | R | 鼠标相对于页面的Y坐标 |
preventDefault | Function | N/A | 可以调用这个方法来阻止事件的默认行为 |
relatedTarget | Element | R | 事件的第二目标,经常用于鼠标事件 |
screenX | Integer | R | 相对于整个计算机屏幕的鼠标x坐标 |
screenY | Integer | R | 相对于整个计算机屏幕的鼠标y坐标 |
shiftKey | Boolean | R | true表示按下shift键,否则为false |
stopPropagation() | Function | N/A | 可调用这个方法阻止将来事件的冒泡 |
target | Element | R | 引起事件的元素/对象 |
timestamp | Long | R | 事件发生的时候,从1970年1月1日0:00起的毫秒数 |
type | String | R | 事件的名称 |
下面是对两种事件对象相似方面的总结
1、 获取事件类型 这样可在任何一种浏览器获取事件的类型: var sType=oEvent.type; 它返回类似”click”和”mouseover”之类的值,当某个函数同时为两个事件处理函数时,很有用。 Function handleEvent(oEvent){ If(oEvent.type == ‘click’){ alert(“Clicked”); }else if(oEvent.type
==’mouseover’){ alert(“Mouse Over!”); } } oDiv.onclick=handleEvent; oDiv.onmouseover=handleEvent; 在这段代码中,将函数handleEvent()分配给click和mouseover事件,作为它们的事件处理函数。在函数中,type属性可用来判断该采取何种行动。
2、 获取按钮代码(keydown/keyup事件) 在keydown或者keyup事件中,可使用keyCode属性获取按下的按键的数值代码: var iKeyCode=oEvent.keyCode; keyCode属性总包含代表按下键的一个代码,它可能代表一个字符,也可能不是。例如, Enter键的keyCode为13,空格键的keyCode为32,回退(backSpace)键的keyCode为8。
3、 检测Shift、Alt、Ctrl键 要检测Shiftp、Alt、Ctrl键是否被按下,IE和DOM都可以使用以下代码: var bShift=oEvent.shiftKey; var bAlt=oEvent.altKey; var bCtrl=oEvent.ctrlKey; 这里面每个属性都包含一个表示按钮是否被按下的Boolean值(这几个按键都会触发Keydown事件,然后即可获取它的keyCode)。
4、 获取客户端坐标 在鼠标事件中,可用clientX和clientY属性获取鼠标指针在客户端区域的位置: var iClientX=oEvent.clientX; var iClientY=oEvent.clientY; 客户端区域是显示网页的窗口部分。这些属性描述鼠标在该区域内位置离边界有多远(单位是像素)。
5、 获取屏幕坐标 在鼠标事件中,可用screenX和screenY属性来获取鼠标指针在计算机屏幕中的 var isScrennX=oEvent.screenX; var isScrennY=oEvent.screenY; 这两个属性都返回表示离用户屏幕的边界有多少个像素的整数。
(四) 区别
IE和DOM的属性并不是每样都很相似。
1、 获取目标 位于事件中心的对象称为目标。假设为<di/>元素分配onclick事件处理函数。触发click事件时,<div/>就被认为是目标。 在IE中,目标包含在event对象的srcElement属性中: var oTarget=oEvent.srcElemtn; 在DOM兼容的浏览器,目标包含在target属性中: var oTarget=oEvent.target; IE目标只能是元素、文档或者窗口;DOM兼容的浏览器也允许把文本节点作为目标。
2、 获取字符代码 你看到了IE和DOM都支持event对象的keyCode属性,它会返回按下按键的数值代码。 如果按键代表一个字符(非Shift、Ctrl、Alt等),IE的keyCode将返回字符的代码(等于它的Unicode值): var iCharCode=oEvent.keyCode; 在ODM兼容的浏览器,按钮的代码和字符会有一个分离。要获取字符代码,使用charCode属性: var
iCharCode=oEvent.CharCode; 然后可用这个值来获取实际的字符,只要使用String.fromCharCode()字符: var sChar=String.fromCharCode(oEvent.charCode); 如果不确定按下的按钮是否包含字符,则可使用isChar属性来进行判断: Is(oEvent.isChar){ var isCharCode=oEvent.charCode; }
3、 阻止某个事件的默认行为 在IE中要阻止某个事件的默认行为,必须将returnValue属性设置为false; oEvent.returnValue=false; 而在Mozilla中,只要调用preventDefault()方法:oEvent.preventDefault(); 某些情况下阻止事件默认行为是十分有用的:第一,当用户右键页面时,阻止他使用上下文菜单。你要阻止contextmenu事件的默认行为就可以了,就这样做:
document.body.contextmenu=function(oEvent){ if(isIE){ oEvent=window.event; oEvent.returnValue=false; }else{ oEvent.preventDefault(); } } 第二,你可能还想在文本框键入字符时,阻止它的默认行为,以禁止特定字符的输入或者推行阻止鼠标的动作,除非满足特定的条件。
4、 停止事件复制(冒泡) 在IE中,要阻止事件进一步冒泡,必须设置cancelBubble属性为true: oEvent.cancelBubble=true; 在mozilla中,只需要调用stopPropagation()方法: oEvent.stopPropagation(); 停止事件复制可以阻止事件流中的其他对象的事件处理函数的执行。
考虑下面的例子:
<html onclick=”alert(‘html’)”>
<head>
<title>事件阻止例子</title>
</head>
<body onclick=”alert(‘body’)”>
<input type=”button” value=”Click me” onclick=”alert(‘input’)” />
</body>
</html>
点击页面上的按钮,会顺序出现三个警告框:”input”、”body”、”html”。这是因为事件先从<input/>元素冒泡到<body/>,然后又到<html/>。然而,如果在按钮处停止事件复制,情况就变了:
<html onclick=”alert(‘html’)”>
<head>
<title>事件阻止例子</title>
<script type=”text/javascript”>
Function handleClick(oEvent){
alert(“input”);
if(isIE){
oEvent.cancelBubble=true;
}else{
oEvent.stopPropagation();
}
}
</script>
</head>
<body onclick=”alert(‘body’)”>
<input type=”button” value=”Click me” onclick=”handleClick(event)” />
</body>
</html>
执行此例子后,点击按钮,你将只能看到”input”警告框,其他的都没有,因为事件的复制被停止。为能正确实现,还需要使用前一章的浏览器检测代码。 你可能还注意到,<input/>元素将event对象作为参数传送给handleClick()函数。这在任何浏览器都是可执行的。因为一旦发生事件,就会创建event对象,且这时是一个全局变量。
相关文章推荐
- 针对JavaScript的常用事件、对象捕获和使用技巧
- JavaScript - window对象方法和事件
- JavaScript对象、事件、属性及方法参考大全
- JavaScript获取事件对象和目标对象
- 深入理解JavaScript的闭包特性 如何给循环中的对象添加事件
- 用 javascript 获取当页面上鼠标(光标)位置 和 触发事件的对象 的方法
- JavaScript中的事件:事件对象
- 【转】Javascript拖拽&拖放系列文章3之细说事件对象
- JavaScript学习笔记之JS事件对象
- JavaScript 事件流、事件处理程序及事件对象总结
- 怎么样用javascript获取触发事件的对象
- Javascript 事件对象(六)事件默认行为
- 10.12 笔记-JavaScript 05 事件对象
- JavaScript对象.属性]集锦、事件查询综合
- JavaScript事件对象event用法分析
- HTML_11_javascript_对象,事件,定时器
- javaScript笔记(二十一) 事件对象
- Javascript:为Element对象添加事件
- javascript事件获取当前事件的对象和值以及ajax连接后台