event——事件对象详解

PS：转自https://www.cnblogs.com/songyaqi/p/5204143.html

1. 事件对象

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

什么时候会产生Event 对象呢? 例如: 当用户单击某个元素的时候,我们给这个元素注册的事件就会触发,该事件的本质就是一个函数,而该函数的形参接收一个event对象. 事件通常与函数结合使用，函数不会在事件发生前被执行！

2. 关于event对象

（1）在触发的事件的函数里面我们会接收到一个event对象,通过该对象我们需要的一些参数,比如说我们需要知道此事件作用到谁身上了,就可以通过event的属性target来获取到(IE暂且不谈),或者想阻止浏览器的默认行为可以通过方法preventDefault()来进行阻止.

以下是event对象的一些属性和方法 

（2）除了上面的鼠标/事件属性，IE 浏览器还支持下面的属性                                                       

（3）标准 Event 属性 下面列出了 2 级 DOM 事件标准定义的属性。

3.Event对象的一些兼容性写法

• 获得event对象兼容性写法 
  event || (event = window.event);
• 获得target兼容型写法 
  event.target||event.srcElement
• 阻止浏览器默认行为兼容性写法 
  event.preventDefault ? event.preventDefault() : (event.returnValue = false);
• 阻止冒泡写法 
  event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);

4.clientX、pageX、screenX

screenX:鼠标位置相对于用户屏幕水平偏移量，而screenY也就是垂直方向的，此时的参照点也就是原点是屏幕的左上角。

clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动。

pageX：参照点也是浏览器内容区域的左上角，但它不会随着滚动条而变动

offsetX：相对于触发事件元素的左上角的偏移。但在不同的浏览器中其值又有所不同。在chrome opera, safari中是指外边缘，即把该元素边框的宽度计算在内，firefox ie则不包含边框值。

layerX：是相对于position为absolute或relative的父元素胡外边缘的距离

不同浏览器对这些属性的支持：

5.获得页面中某个元素的位置

function getElementLeft(element){
    var actualLeft = element.offsetLeft;
    var current = element.offsetParent;//定位父级，实际为body
    //如果定位父级不为空，元素的实际定位等于定位父级的left+元素的left
    while (current !== null){
        actualLeft += current.offsetLeft;
        current = current.offsetParent;
        //将body的定位父级设为current，body没有定位父级，current为空，结束循环
    }
    return actualLeft;
}
function getElementTop(element){
    var actualTop = element.offsetTop;
    var current = element.offsetParent;
    while (current !== null){
        actualTop += current. offsetTop;
        current = current.offsetParent;
    }
    return actualTop;
}