1.事件

（1）事件對象的兼容性寫法

var event = event || window.event;

event對象常用屬性

屬性         作用
-----------------------------------------------------
data        返回拖拽對象的URL字符串（dragDrop）
width       該窗口或框架的高度
height      該窗口或框架的高度
pageX       光標相對于該網(wǎng)頁的水平位置（ie無）
pageY       光標相對于該網(wǎng)頁的垂直位置（ie無）
screenX     光標相對于該屏幕的水平位置
screenY     光標相對于該屏幕的垂直位置
target      該事件被傳送到的對象
type        事件的類型
clientX     光標相對于該客戶區(qū)的水平位置 
clientY     光標相對于該客戶區(qū)的垂直位置

三個事件的重要坐標：

clientX clientY
當前窗口的左上角為基準點

pageX pageY
以當前文檔的左上角為基準點

screenX screenY
當前屏幕的左上角為基準點

注意：
IE678不支持pageX和pageY 但是我們可以采取另一種方式
client和documentElement.scroll在IE678中都支持

var pageY = event.pageY || event.clientY +
            document.documentElement.scrollTop;
var pageX = event.pageX || event.clientX + 
            document.documentElement.scrollLeft;

示例代碼：

document.onclick = function (event) {
        //var event = event || window.event;
    var event = eventUtil.getEvent(event);

        console.log("client: " + event.clientX + "--" + event.clientY);//瀏覽器
        //page有兼容問題 client沒有 我們可以用client來計算page
  //var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
        //var pageX = getPageX(event);
    var pageX = eventUtil.getPageX(event);

  //var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
    var pageY = getPageY(event);

    console.log("page: " + event.pageX + "--" + event.pageY);//頁面

    console.log("screen: " + event.screenX + "--" + event.screenY);//屏幕
};

常用事件：

    onmouseover  鼠標經(jīng)過
    onmouseout  鼠標離開
    onmousedown  鼠標按下
    onmouseup    鼠標彈起      
    onmousemove  鼠標移動

其他內容：

1.清除選中的內容

window.getSelection ? window.getSelection().removeAllRanges()  
                    : document.selection.empty();  //三目運算
正常瀏覽器支持：window.getSelection() 
IE678以下支持：document.selection 
　

2.判斷文字選中

 window.getSelection ? window.getSelection().toString() 
                : document.selection.createRange().text;//三目運算符

（2）事件注冊的兩種方式

element.addEventListener(“事件類型”,”事件處理函數(shù)”,”是否使用捕獲”)

特點：

addEventListener的好處是不會將其他事件覆蓋，但是有兼容性問題

removeEventListener可以移除指定事件

addEventListener便于管理事件隊列 但一般用on的就可以了比較簡單

（3）事件冒泡的三個階段

1捕獲階段
2目標階段   //執(zhí)行當前對象的事件處理程序
3冒泡階段

阻止事件冒泡：

//兼容性寫法
function stopPropagation(event) {
    if (event.stopPropagation) {
        event.stopPropagation();
    } else {
        event.cancelBubble = true;
    }
}

事件兼容性總結（封裝函數(shù)）：

function getEvent(event) {
//事件的兼容性
return event || window.event;
}

//page的兼容性
function getPageX(event) {
return event.pageX || event.clientX + document.documentElement.scrollLeft;
}
function getPageY(event) {
return event.pageY || event.clientY + document.documentElement.scrollTop;
}

//冒泡事件的兼容性問題
function stopPropagation(event) {
if (event.stopPropagation) {
    event.stopPropagation();
} else {
    event.cancelBubble = true;
}
}

//獲取目標事件兼容性的問題
function getTarget(event) {
return event.target || event.srcElement;
}

//對兼容性封裝的函數(shù)
var eventUtil = {
getEvent: function (event) {
    return event || window.event;
},
getPageX: function (event) {
    return event.pageX || event.clientX + document.documentElement.scrollLeft;
},
getPageY: function (event) {
    return event.pageY || event.clientY + document.documentElement.scrollTop;
},
stopPropagation: function (event) {
    if (event.stopPropagation) {
        event.stopPropagation();
    } else {
        event.cancelBubble = true;
    }
},
getTarget: function (event) {
    return event.target || event.srcElement;
}
};

2.鼠標事件和鍵盤事件

常用鼠標事件：

mousedown、mouseup、mousemove、mouseover、mouseout、click、dblclick

onmousedown鼠標按下 onmouseup鼠標彈起

onmouseclick=onmousedown+onmouseup

常用鍵盤事件：

keydown、keypress、keyup onkeydown鍵盤按下 onkeyup鍵盤彈起

onkeypress=onkeydown+onkeyup

onkeydown onkeyup 輸出的是鍵盤碼 onkeypress輸出的是ASCII碼表