一、事件基础
1、事件对象
event 事件对象，用来获取事件的详细信息：鼠标位置 键盘按键
点击事件 整个页面绑定点击事件 整个页面的事件应该加给document
例子：获得鼠标位置：clientX clientY
这里使用来得到可视区域的鼠标位置
IE和chrome没问题 FF不支持event
使用兼容方式
var oEvent=ev||event;
这样所有浏览器都可以使用事件对象了。
2、事件流
事件流动的过程。
事件冒泡，从最底层点击触发对象开始，一层一层晚上事件冒泡。
点击最里层的红色div 触发了红色事件，然后会一级一级的传给绿色、会的div
最后传给body和document
仿select下拉框原理：
点击按钮，显示隐藏的菜单区域，点击空白处隐藏。
这里给document加点击事件后，点击按钮也会触发，所以需要阻止事件的冒泡。
使用event.cancelBubble=true;将冒泡禁止。
3、鼠标坐标位置 鼠标事件
单纯使用clientX和ClientY是可视化区域的位置，一旦页面出现滚动条
滚动位置就会影响这个程序。
解决方案：
使用clentY+scrollTop可以得到整个页面鼠标的实际位置。
4、键盘事件
使用keyCode检测按键
按下：onkeydown 弹起：onkeyup
print screen没有keyCode
例子：鼠标控制div移动
原理：判断keycode后执行移动（div的位置变化）
二、事件中级
1、默认行为 比如右键出菜单 这是浏览器默认行为
如何屏蔽浏览器默认行为？
document.oncontextmenu=function(){
return false;//只要return false;就能屏蔽默认菜单事件
};
效果
2、拖拽事件
拖拽原理：鼠标与div左上角距离不变
需要绑定三个事件
mousedown mousemove mouseup
使用return false阻止默认事件可以阻止火狐浏览器的bug 拖拽空div 可以拖出两个。！！
上面的程序还有bug 没有限制边缘范围 防止拖拽出浏览器回不来。
只需要判断现在的位置和浏览器边缘判断就行了。
清除事件，不留垃圾。
三、事件高级
1、事件绑定
浏览器兼容性处理
可以简单封装简化一下使用方式，处理兼容性。
2、高级拖拽
1、限制不能拖出窗口
主要是判断边缘处理，如果越界自动回到边界处。
2、限制不能拖出父级组件
上面程序的bug是在IE7、8上存在选择文字时bug
使用只有IE支持的 事件捕获功能
obj.setCapture(); 作用在于把网页中所有的事件都
集中在一个地方应用。
这样写可以分别判断ie和其他浏览器，分别处理
3、磁性吸附
4、带框的拖拽
动态创建一个框（div 虚线）；
大小为要拖动的div的大小
线框跟着鼠标运动
鼠标up的时候 目标div移动到虚框位置
删除虚框
虚线会占用一个像素 所以宽度应该减去2
