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码表
