JavaScript之事件对象

来源：http://www.yiiyaa.net/1068

JavaScript之事件对象

      基于不同浏览器开发的开发人员都知道，获取事件信息是很重要的。所以，会创建包含关于刚刚发生的事件的信息事件对象，包含的信息如下：引起事件的对象；事件发生时鼠标的信息；事件发生时键盘的信息；事件对象只在发生事件时才被创建，且只有事件处理函数才能访问。所有事件处理函数执行完毕后，事件对象就被销毁。
（一） 定位
        在IE中，事件对象是window对象的一个属性event。也就是说，事件处理函数必须这样访问事件对象：
　　oDiv.οnclick=function(){
　　　　var oEvent=window.event;
　　}
　　尽管它是window对象的属性，event对象还是只能在事件发生时访问。所有的事件处理函数执行完毕后，事件对象就被销毁。
　　DOM标准规则说，event对象必须作为唯一的参数传给事件处理函数。所以，在DOM兼容的浏览器中访问事件对象，要这么做：

　　oDiv.οnclick=function(){
　　　　var oEvent=arguments[0];
　　}
　　当然，可直接命名参数，访问就方便：
　　oDiv.οnclick=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坐标

2、 DOM

    DOM事件对象包含了相似的核心属性和方法，但也有很大的不同。下表逐个列出：

特征/方法	类型	可读/可写	描述
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.οnclick=handleEvent;

　　oDiv.οnmοuseοver=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 οnclick=”alert(‘html’)”>

　　    <head>

　　　　    <title>事件阻止例子</title>

　　    </head>

　　    <body οnclick=”alert(‘body’)”>

　　　　    <input type=”button” value=”Click me” οnclick=”alert(‘input’)” />　　

　　    </body>

    </html>

    点击页面上的按钮，会顺序出现三个警告框：”input”、”body”、”html”。这是因为事件先从<input/>元素冒泡到<body/>，然后又到<html/>。然而，如果在按钮处停止事件复制，情况就变了：

　　<html οnclick=”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 οnclick=”alert(‘body’)”>

　　　　<input type=”button” value=”Click me” οnclick=”handleClick(event)” />　　

　　</body>

　　</html>

　　执行此例子后，点击按钮，你将只能看到”input”警告框，其他的都没有，因为事件的复制被停止。为能正确实现，还需要使用前一章的浏览器检测代码。

　　你可能还注意到，<input/>元素将event对象作为参数传送给handleClick()函数。这在任何浏览器都是可执行的。因为一旦发生事件，就会创建event对象，且这时是一个全局变量。

原创文章，转载请注明： 转载自 http://www.yiiyaa.net/