js事件对象event

js的事件对象即我们函数中经常会用到的 Event

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用，函数不会在事件发生前被执行！

事件句柄

通常我们用得比较多的就是在标签上写onclick="fn()"

鼠标 / 键盘属性

属性	描述
altKey	返回当事件被触发时，"ALT" 是否被按下。
button	返回当事件被触发时，哪个鼠标按钮被点击。
clientX	返回当事件被触发时，鼠标指针的水平坐标。
clientY	返回当事件被触发时，鼠标指针的垂直坐标。
ctrlKey	返回当事件被触发时，"CTRL" 键是否被按下。
metaKey	返回当事件被触发时，"meta" 键是否被按下。
relatedTarget	返回与事件的目标节点相关的节点。
screenX	返回当某个事件被触发时，鼠标指针的水平坐标。
screenY	返回当某个事件被触发时，鼠标指针的垂直坐标。
shiftKey	返回当事件被触发时，"SHIFT" 键是否被按下。

IE 属性

除了上面的鼠标/事件属性，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

首先我们得获取事件对象，在IE中因为事件对象是全局的所以我们可以直接在函数中获取：

var e = window.event； //该获取方法在谷歌浏览器中也有效果

但是在火狐中 event 不能通过这种方式获取

火狐只能通过显示的传入参数才能取到事件对象如：

<a onclick="fn(event,params)">

<script>
    function fn(e,params){
        code...
    }
</script>

上述例子在各个浏览器都可以兼容到

情况一：事件冒泡处理

事件冒泡就是子级会触发父级的事件为了避免触发到父级的事件就必须阻止事件的冒泡行为示例代码

if (e.stopPropagation) {
    e.stopPropagation(); //fireFox chrome
    e.preventDefault();  //此处代码为 阻止默认事件 如复选框点击 选中， a链接的 跳转等
}else if (window.event) {//IE
    window.event.cancelBubble = true;
}

情况二：获取事件触发的对象

有一种情况比较常见的就是点击空白处隐藏，

该功能的实现就要通过 event 去判断点击的区域是否在指定的对象内 event.target 返回的是触发事件的DOM

代码如下：

$(document).bind("click",function(e){
    var target  = $(e.target);
    if(target.closest("#area").length == 0){ //此处的target 为事件触发的对象 若不在id为area的对象内则隐藏该对象
        $("#area").hide();
    }
})

情况三：一些需要获取鼠标实时位置方法

如：移动弹出层的功能就必须在移动的时候实时获取到鼠标的位置