JavaScript：event对象
以下内容是我从网上整理而来的，供大家共同学习，错误之处还望指出：
event 对象是 JavaScript 中一个非常重要的对象，用来表示当前事件。event 对象的属性和方法包含了当前事件的状态。
当前事件，是指正在发生的事件；状态，是与事件有关的性质，如 引发事件的DOM元素、鼠标的状态、按下的键等等。
event 对象只在事件发生的过程中才有效。
获取event对象
在 W3C 规范中，event 对象是随事件处理函数传入的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持这种方式；但是对于 IE8.0 及其以下版本，event 对象必须作为 window 对象的一个属性。
◆ 在遵循 W3C 规范的浏览器中，event 对象通过事件处理函数的参数传入。
语法：
elementObject.OnXXX=function(e){
var eve=e; // 声明一个变量来接收 event 对象
}
上面绑定的事件处理函数中，参数 e 用来传入 event 对象，变量 eve 则表示当前事件。这个过程是 JavaScript 自动完成的。
例如，要获取发生事件时鼠标的坐标，可以这样写：
- <div id="demo">在这里单击</div>
- <script type="text/javascript">
- document.getElementById("demo").onclick=function(e){
- var eve=e;
- var x=eve.x; // X坐标
- var y=eve.y; // Y坐标
- alert("X坐标："+x+"\nY坐标："+y);
- }
- </script>
请看下面的演示：
（Chrome、FireFox、Opera、Safari、IE9.0及其以上版本）
◆ 对于 IE8.0 及其以下版本，event 必须作为 window 对象的一个属性。
语法：
elementObject.OnXXX=function(){
var eve=window.event; // 声明一个变量来接收event对象
}
例如，要取得发生事件时鼠标的坐标，可以这样写：
- <div id="demo">在这里单击</div>
- <script type="text/javascript">
- document.getElementById("demo").onclick=function(){
- var eve=window.event;
- var x=eve.x; // X坐标
- var y=eve.y; // Y坐标
- alert("X坐标："+x+"\nY坐标："+y);
- }
- </script>
请看下面的演示：
（IE8.0及其以下）
可以看出，要想获取与当前事件有关的状态，比如发生事件的DOM元素、鼠标坐标、键盘按键等，就要处理浏览器的兼容问题。
典型代码：
elementObject.OnXXX=function(e){
var eve = e || window.event; // 使用 || 运算取得event对象
}
这里要注意一点， || 运算的返回值不一定是 Boolean 类型，当 || 运算的两个操作数中有一个为真时，将返回该操作数本身的值。上面的代码，如果 event 随函数的参数传入，e 为真，eve=e；如果作为 window 对象的属性，window.event 为真，eve=window.event 。
改进上面获取鼠标坐标的代码，使它兼容所有浏览器：
- <div id="demo">在这里单击</div>
- <script type="text/javascript">
- document.getElementById("demo").onclick=function(e){
- var eve = e || window.event;
- var x=eve.x;
- var y=eve.y;
- alert("X坐标："+x+"\nY坐标："+y);
- }
- </script>
请看下面的演示：
（在所有浏览器下演示）
event对象常用属性和方法
event 对象用来表示当前事件，事件有很多状态，例如，鼠标单击时的位置，按下键盘时的按键，发生事件的HTML元素，是否执行默认动作，是否冒泡等，这些都是作为event对象的属性和方法存在的。要想获得相应的状态，就要访问对应的属性和方法。
| 属性 | 描述 | IE | 非IE | W3C |
|---|---|---|---|---|
| altKey | 返回当事件被触发时，"ALT" 是否被按下。 | Yes | Yes | Yes |
| button | 返回当事件被触发时，哪个鼠标按钮被点击。 | Yes | Yes | Yes |
| clientX | 返回当事件被触发时，鼠标指针的水平坐标。 | Yes | Yes | Yes |
| clientY | 返回当事件被触发时，鼠标指针的垂直坐标。 | Yes | Yes | Yes |
| ctrlKey | 返回当事件被触发时，"CTRL" 键是否被按下。 | Yes | Yes | Yes |
| metaKey | 返回当事件被触发时，"meta" 键是否被按下。 | No | Yes | Yes |
| relatedTarget | 返回与事件的目标节点相关的节点。 | No | Yes | Yes |
| screenX | 返回当某个事件被触发时，鼠标指针的水平坐标。 | Yes | Yes | Yes |
| screenY | 返回当某个事件被触发时，鼠标指针的垂直坐标。 | Yes | Yes | Yes |
| shiftKey | 返回当事件被触发时，"SHIFT" 键是否被按下。 | Yes | Yes | Yes |
| bubbles | 返回布尔值，指示事件是否是起泡事件类型。 | No | Yes | Yes |
| cancelable | 返回布尔值，指示事件是否可拥可取消的默认动作。 | No | Yes | Yes |
| currentTarget | 返回其事件监听器触发该事件的元素。 | No | Yes | Yes |
| eventPhase | 返回事件传播的当前阶段。 | Yes | ||
| target | 返回触发此事件的元素（事件的目标节点）。 | No | Yes | Yes |
| timeStamp | 返回事件生成的日期和时间。 | No | Yes | Yes |
| type | 返回当前 Event 对象表示的事件的名称。 | Yes | Yes | Yes |
| 方法 | 描述 | IE | 非IE | W3C |
| initEvent() | 初始化新创建的 Event 对象的属性。 | No | Yes | Yes |
| preventDefault() | 通知浏览器不要执行与事件关联的默认动作。 | No | Yes | Yes |
| stopPropagation() | 不再派发事件。 | No | Yes | Yes |
除了上面W3C规范所规定的属性和方法外，IE浏览器还支持以下属性。
| 属性 | 描述 |
|---|---|
| cancelBubble | 如果事件句柄想阻止事件传播到包容对象，必须把该属性设为 true。 |
| fromElement | 对于 mouseover 和 mouseout 事件，fromElement 引用移出鼠标的元素。 |
| keyCode | 对于 keypress 事件，该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup 事件，它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。 |
| offsetX,offsetY | 发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标。 |
| returnValue | 如果设置了该属性，它的值比事件句柄的返回值优先级高。把这个属性设置为 fasle，可以取消发生事件的源元素的默认动作。 |
| srcElement | 对于生成事件的 Window 对象、Document 对象或 Element 对象的引用。 |
| toElement | 对于 mouseover 和 mouseout 事件，该属性引用移入鼠标的元素。 |
| x,y | 事件发生的位置的 x 坐标和 y 坐标，它们相对于用CSS动态定位的最内层包容元素。 |
Event 对象
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行！
其中：event.target不支持IE浏览器。
1，事件句柄（事件函数）：以on开头的若干
2，鼠标/键盘属性： 
3， 
二，
- <div class="opt_group">
- <label title="标签1"><input type="radio" value="label1" name="page_type" />标签1 <label>
- <label title="标签2"><input type="radio" value="label2" name="page_type" />标签2 <label>
- </div>
- $(".opt_group label").click(function(e){
- var $target = e.target;//firefox 下的 event.target = IE 下的 event.srcElement
- var val = $target.val();//
- console.log(e.target.nodeName,e.target,$(e.target));
- });
- /*
- 触发两次，一次是label，一次input。
- */
截图： 
一，Js event事件在IE、FF兼容性问题
1，event对象
IE：有window.event对象
FF：没有window.event对象。可以通过给函数的参数传递event对象。
如：
<input type="button" onmousemove="showDiv(event);"//event不需要加引号
function showDiv(event)
{
var event=window.event||event;
event.clientX;
event.clientY;
}
2，event.srcElement||event.target
Javascript event.srcElement
感觉这个挺好，可以捕获当前事件作用的对象，如event.srcElement.tagName可以捕获活动标记名称。
注意获取的标记都以大写表示，如"TD","TR","A"等。所以把看过的一些抄下来，不记得的时候再来看看。
event.srcElement从字面上可以看出来有以下关键字：事件,源 他的意思就是：当前事件的源，我们可以调用他的各种属性 就像:document.getElementById("")这样的功能，经常有人问 firefox 下的 event.srcElement 怎么用，在此详细说明：
IE下,event对象有srcElement属性,但是没有target属性;Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的，即：firefox 下的 event.target = IE 下的 event.srcElement
解决方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)来代替IE下的event.srcElement或者Firefox下的event.target.
IE和FF获取事件的不同：
var e = window.event || e.target; //event 对象只在事件发生的过程中才有效。
| 阻止事件默认行为： |
| IE：window.event.returnValue = true |
| FF：e.preventDefault() |
| 阻止事件冒泡行为： |
| IE：window.event.cancelBubble = true |
| FF：e.stopPropagation() |
| 属性 说明 |
| clientX/clientY 返回鼠标在窗口客户区域中的x/y坐标。 |
| offsetX/offsetY 返回相对于触发事件的对象，鼠标位置的x/y坐标 |
| screenX/screenY 返回鼠标相对于用户屏幕的x/y坐标 |
| x/y 获取鼠标指针位置相对于父文档的 x/y像素坐标。 |
| 在IE中。IE8以下的版本并非是相对文档。它们的值和clientX,clientY的值一样，相对窗口客户区. |
| srcElement/toElement fromElement声明mouseover事件中鼠标移出的文档元素,toElement声明mouseout事件中鼠标移入的文档元素 |
| type 返回没有“on”作为前缀的事件名，比如，onclick事件返回的type是click |
| srcElement 返回发生事件的文档元素。 |
| button 返回按下的鼠标键。 |
| 0 没按键 |
| 1 按左键 |
| 2 按右键 |
| 4 按中间键 |
| 组合 |
| 3 按左右键 |
| 5 按左键和中间键 |
| 6 按右键和中间键 |
| 7 按所有的键 |
| cancelBubble 设置是否阻止事件起泡。默认值为false(不阻止) |
| returnValue 设置是否阻止事件的默认工作 |
| keyCode 获取键盘按键值 |
| 对于 keypress 事件，该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup 事件，它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。 |
| charCode 获取键盘按键值 只用于 keypress事件 |
| shiftKey 检查shift键的状态 |
| ctrlKey 检查ctrl键的状态 |
| altKey 检查alt键的状态 |
| propertyName 返回元素的变化了的属性的名称。 |
| 可以通过使用 onpropertychange 事件，得到 propertyName 的值。 |
| 如：obj.onpropertychange=function(){alert(window.event.propertyName} |
| 标准Event 属性和方法 |
| clientX/clientY 返回鼠标在窗口客户区域中的x/y坐标。 |
| screenX/screenY 返回鼠标相对于用户屏幕的x/y坐标 |
| pageX/pageY 获取鼠标指针位置相对于父文档的 x/y像素坐标 |
| layerX/layerY 返回相对于触发事件的对象，鼠标位置的x/y坐标 |
| 在FireFox中只有触发事件对你的CSS属性 position 值不为 static才能获取到正确的坐标值 |
| button 返回按下的鼠标键。 |
| 0 按左键 |
| 1按右键 |
| 2 按中间键 |
| type 返回没有“on”作为前缀的事件名，比如，onclick事件返回的type是click |
| target 发生事件的节点，可能与currentTarget不同 |
| currentTarget 当前正在运行时间句柄的节点 |
| eventPhase 一个数字，指定当前所处的事件传播过程的阶段。它的值为常量：Event.CAPTURING_PHASE、Event.AT_TARGET、Event.BUBBLING_PHASE |
| timeStamp 一个Date对象，声明了事件何时发生 |
| bubbles 一个布尔值，声明该事件是否在文档树中起泡 |
| cancelable 一个布尔值，声明该事件是否有默认动作 |
| stopPropagation() 阻止事件传播 |
| preventDefault() 阻止执行默认动作 |
| relatedTarget 引用与事件的目标节点相关的节点。（mouseover--鼠标离开的节点，mouseout--鼠标将进入的节点） |
| cancelable 一个布尔值，声明该事件是否有默认动作 |
| cancelable 一个布尔值，声明该事件是否有默认动作 |
| shiftKey 检查shift键的状态 |
| ctrlKey 检查ctrl键的状态 |
| altKey 检查alt键的状态 |
| metaKey 返回一个布尔值，指示当事件发生时，"meta" 键是否被按下并保持住。 |
| which 返回keydown何keyup事件发生的时候按键的代码，以及keypress 事件的Unicode字符 |
