如何获取event事件？
事件对象需要作为参数传入事件。
function fn(event){
console.log(event)
}
或者
function(){
console.log(arguments[0])
}
缺德定律再现！
IE中： window.event
正常浏览器中： 对象.on事件 = function(event){}
兼容方式：
function fn(eve){
var e = eve || window.event;
}
检测按下的鼠标按键：event.button
返回值为0，左键；返回值为1，中键；返回值为2，右键
检测相对于浏览器的位置：clientX和clientY
当鼠标事件发生时，鼠标相对于浏览器左上角的位置
检测相对于文档的位置：pageX和pageY
当鼠标事件发生时，鼠标相对于文档左上角的位置。（IE7/8无）（类似于event.clientX和event.clientY）
检测相对于屏幕的位置：screenX和screenY
当鼠标事件发生时，鼠标相对于屏幕左上角的位置
检测相对于事件源的位置：offsetX和offsetY
当鼠标事件发生时，鼠标相对于事件发生元素左上角的位置
.键盘事件（keyup／keydown／keypress）
键盘事件：
onkeydown 键盘按下
onkeyup 键盘抬起
onkeypress 按下并抬起数字字母按键
得知按下的键盘上的哪个键：keyCode
event.keyCode 返回当前按键的ASCII码
空格 32
回车 13
左 37
上 38
右 39
下 40
兼容问题： var eve = eve || window.event
var keyC = eve.keyCode || eve.which
案例：通过键盘上下左右，控制页面中的元素位置移动
ctrlKey 判断ctrl是否被按下，按下返回true
shiftKey 判断shift是否被按下，按下返回true
altKey 判断alt是否被按下，按下返回true
oncontextmenu 鼠标右键事件
如何阻止默认事件？
e.preventDefault();
window.event.returnValue = false;
处理兼容方式
if( e.preventDefault ){
e.preventDefault();
}else{
window.event.returnValue = false;
}
.鼠标拖拽效果（onmousedown／onmousemove／onmouseup）
拖拽分解：
按下鼠标 ----> 移动鼠标 ----> 松开鼠标
1.给目标元素添加onmousedown事件，拖拽的前提是在目标元素按下鼠标左键
2.当onmousedown发生以后，此刻给document添加onmousemove事件，意味着此刻鼠标在网页的移动都将改变目标元素的位置
3.在onmousemove事件中，设定目标元素的left和top，
公式
目标元素的left = 鼠标的clientX – （鼠标和元素的横坐标差，即offsetX）
目标元素的top = 鼠标的clientY– （鼠标和元素的纵坐标差，即offsetY）
4.当onmousedown发生以后，此刻给document添加onmouseup事件，意味着此刻鼠标在网页的任意位置松开鼠标，都会放弃拖拽的效果
在onmouseup事件中，取消document的onmousemove事件即可。
事件触发阶段主要由于事件流：DOM0级事件处理阶段和DOM2级事件处理；
DOM0级事件处理，是一种赋值方式，是被所有浏览器所支持的，简单易懂容易操作；
元素.onclick = function(){}
DOM2级事件处理是所有DOM节点中的方法，可以重复绑定，但是浏览器兼容存在问题；
非IE下：(这里的事件名不带on),第三个参数表示是在捕获阶段还是冒泡阶段。可以重复绑定事件，执行顺序按照绑定顺序来执行。
oDiv.addEventListener('click',fn,false);
oDiv.removeEventListener('click',fn ,false);
IE下：
只有冒泡阶段,所以没有第三个参数；（这里的事件名需要加on）
oDiv.attachEvent()；
oDiv.detachEvent() ;
冒泡：从下往上（从里往外）
捕获：从上往下（从外往内）
兼容问题解决：
1.封装成对象的方式
var EventUtil={
addHandler:function(DOM,EventType,fn){
if(DOM.addEventListener){
DOM.addEventListener(EventType,fn,false);
}else if(DOM.attachEvent){
DOM.attachEvent('on'+EventType,fn)
}else{
DOM['on'+EventType]=fn
}
},
removeHandler:function(DOM,EventType,fn){
if(DOM.removeEventListener){
DOM.removeEventListener(EventType,fn,false)
}else if(DOM.detachEvent){
DOM.detachEvent('on'+EventType,fn)
}else{
DOM['on'+EventType]=null;
}
}
}