1.事件
（1）事件對象的兼容性寫法
var event = event || window.event;
event對象常用屬性
屬性 作用
-----------------------------------------------------
data 返回拖拽對象的URL字符串（dragDrop）
width 該窗口或框架的高度
height 該窗口或框架的高度
pageX 光標(biāo)相對于該網(wǎng)頁的水平位置（ie無）
pageY 光標(biāo)相對于該網(wǎng)頁的垂直位置（ie無）
screenX 光標(biāo)相對于該屏幕的水平位置
screenY 光標(biāo)相對于該屏幕的垂直位置
target 該事件被傳送到的對象
type 事件的類型
clientX 光標(biāo)相對于該客戶區(qū)的水平位置
clientY 光標(biāo)相對于該客戶區(qū)的垂直位置
三個(gè)事件的重要坐標(biāo)：
clientX clientY
當(dāng)前窗口的左上角為基準(zhǔn)點(diǎn)pageX pageY
以當(dāng)前文檔的左上角為基準(zhǔn)點(diǎn)screenX screenY
當(dāng)前屏幕的左上角為基準(zhǔn)點(diǎn)
注意：
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來計(jì)算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 鼠標(biāo)經(jīng)過
onmouseout 鼠標(biāo)離開
onmousedown 鼠標(biāo)按下
onmouseup 鼠標(biāo)彈起
onmousemove 鼠標(biāo)移動(dòng)
其他內(nèi)容：
1.清除選中的內(nèi)容
window.getSelection ? window.getSelection().removeAllRanges()
: document.selection.empty(); //三目運(yùn)算
正常瀏覽器支持：window.getSelection()
IE678以下支持：document.selection
2.判斷文字選中
window.getSelection ? window.getSelection().toString()
: document.selection.createRange().text;//三目運(yùn)算符
（2）事件注冊的兩種方式
element.addEventListener(“事件類型”,”事件處理函數(shù)”,”是否使用捕獲”)
特點(diǎn)：
addEventListener的好處是不會(huì)將其他事件覆蓋纤子，但是有兼容性問題
removeEventListener可以移除指定事件
addEventListener便于管理事件隊(duì)列 但一般用on的就可以了比較簡單
（3）事件冒泡的三個(gè)階段
1捕獲階段
2目標(biāo)階段 //執(zhí)行當(dāng)前對象的事件處理程序
3冒泡階段
阻止事件冒泡：
//兼容性寫法
function stopPropagation(event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
事件兼容性總結(jié)（封裝函數(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;
}
}
//獲取目標(biāo)事件兼容性的問題
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.鼠標(biāo)事件和鍵盤事件
常用鼠標(biāo)事件：
mousedown控硼、mouseup泽论、mousemove卡乾、mouseover、mouseout幔妨、click、dblclick
onmousedown鼠標(biāo)按下 onmouseup鼠標(biāo)彈起
onmouseclick=onmousedown+onmouseup
常用鍵盤事件：
keydown误堡、keypress、keyup onkeydown鍵盤按下 onkeyup鍵盤彈起
onkeypress=onkeydown+onkeyup
onkeydown onkeyup 輸出的是鍵盤碼 onkeypress輸出的是ASCII碼表
