1.事件
（1）事件對象的兼容性寫法
var event = event || window.event;
event對象常用屬性
屬性 作用
-----------------------------------------------------
data 返回拖拽對象的URL字符串（dragDrop）
width 該窗口或框架的高度
height 該窗口或框架的高度
pageX 光標相對于該網頁的水平位置（ie無）
pageY 光標相對于該網頁的垂直位置（ie無）
screenX 光標相對于該屏幕的水平位置
screenY 光標相對于該屏幕的垂直位置
target 該事件被傳送到的對象
type 事件的類型
clientX 光標相對于該客戶區的水平位置
clientY 光標相對于該客戶區的垂直位置
三個事件的重要坐標：
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 鼠標經過
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(“事件類型”,”事件處理函數”,”是否使用捕獲”)
特點：
addEventListener的好處是不會將其他事件覆蓋，但是有兼容性問題
removeEventListener可以移除指定事件
addEventListener便于管理事件隊列 但一般用on的就可以了比較簡單
（3）事件冒泡的三個階段
1捕獲階段
2目標階段 //執行當前對象的事件處理程序
3冒泡階段
阻止事件冒泡：
//兼容性寫法
function stopPropagation(event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
事件兼容性總結（封裝函數）：
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;
}
//對兼容性封裝的函數
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碼表
