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;
}

event——事件對象詳解