JavaScript事件
主要内容：
1. 事件类型
2. 事件绑定
3. 事件解绑
4. 事件对象
==========================1. 事件类型==========================
鼠标事件：
click 鼠标单击
bdclick 鼠标双击
mouseover 鼠标放上
mouseout 鼠标移开
mousemove 鼠标移动
onmousedown 鼠标单击按下
onmouseup 鼠标单击松开
mouseenter：鼠标进入
mouseleave：鼠标离开
【注】经过子节点会重复触发：mouseover mouseout
经过子节点不会重复触发: mouseenter mouselaeve
键盘事件：
keydown：按键按下
keypress：按键按下(只支持字符键)
keyup：按键抬起
HTML事件：
1. window事件
load：文档加载完成
unload：当页面解构的时候触发(只有IE浏览器支持)
resize：窗口尺寸变化
scroll：滚动条移动
2. 表单事件
blur：失去光标
focus：得到光标
select：被选中的时候
change：内容被改变
【注】必须添加在form元素节点上
submit：当用户点击提交按钮在元素上触发。
reset：当用户点击重置按钮在元素上触发。
==========================2. 事件绑定==========================
1. on+事件类型 (弊端：同一事件只能给同一元素绑定一次)
a、内联模式
不符合结构、样式、行为相分离的原则
一个元素绑定多个事件时，只会执行第一个事件
b、外联模式
获取到dom元素，并在元素上绑定事件
一个元素绑定多个事件时，后面的事件会覆盖前面的事件
2. 事件监听器 (可给同一元素绑定多个事件，不会覆盖)
a、obj.addEventListener(type，handler，false/true);
低版本IE中没有该事件监听
参数1：事件类型
参数2：事件执行触发的函数
参数3：是否在冒泡阶段执行，true在捕获阶段执行，false在冒泡阶段执行，可选项。一般的绑定事件，都是采用冒泡方式
如果给同一元素绑定多个事件，那么采用先绑定先执行的顺序执行
使用 removeEventListener() 移除绑定过的事件
b、obj.attachEvent('on' + type，handler);
针对低版本IE的写法，低版本IE中不存在捕获阶段，所以没有第三个参数
如果给同一元素绑定多个事件时，采用先绑定后执行的规则 倒序执行
使用detachEvent()移除绑定过的事件
事件监听器绑定兼容写法:
1 function bind(ele,type,handle){ // 要绑定的事件对象 ，事件类型 ， 事件处理函数 2 if(ele.addEventListener){ 3 ele.addEventListener(type,handle,false); 4 }else if(ele.detachEvent){ 5 ele.attachEvent("on"+type,handle); 6 }else{ 7 ele["on" + type] = callback; 8 } 9 }
==========================3. 事件解绑==========================
一般情况下，执行过的代码内存会自动回收，但是事件在执行完后，内存没有自动回收，这样会导致内存一直占用，代码执行效率降低，所以事件解绑有利于性能优化
1. 使用“on+事件类型”方式绑定的事件，只要给他赋值为 null ，就能解绑
2. 针对于addEventListener()的解绑方式
removeEventListener(ele,type, handle)
3. 针对于attachEvent()的解绑方式
detachEvent(ele,type, handle)
事件解绑同样有兼容写法：
1 function unbind(ele,type,handle){ 2 if(ele.removeEventListener){ 3 ele.removeEventListener(type,handle,false); 4 }else if(ele.detachEvent){ 5 ele.detachEvent("on"+type,handle); 6 }else{ 7 ele["on" + type] = null; 8 } 9 }
==========================4. 事件对象==========================
事件绑定：元素节点.on + 事件类型 = 匿名函数;
触发某个事件，都会产生一个事件对象Event
触发事件的时候，系统会自动去调用事件绑定的函数.将事件对象当作第一个参数传入
事件对象的属性
1. 鼠标按钮属性
dom为事件对象提供了button属性，来区分鼠标上的三个按钮
0 规定鼠标左键。
1 规定鼠标中键(滚轮）。
2 规定鼠标右键。
2. 鼠标事件对象的属性
获取当前鼠标位置，原点位置不一样
|
clientX clientY |
原点位置：可视窗口的左上角为原点 |
|
pageX pageY |
原点位置：整个页面的左上角（包含滚出去的滚动距离） |
|
screenX screenY |
原点位置：屏幕的左上角 |
3. 修改键
和别的操作进行组合，形成一些快捷键操作
|
shifKey |
按下shift键，为true,默认为false |
|
altKey |
|
|
ctrlKey |
|
|
metaKey
|
windows系统 按下windows(开始）键，为true macos系统 按下command键，为true |
4. 键盘事件对象的属性
|
keyCode which |
键码 只在keydown下支持 格式： var which = e.which || e.keyCode; 返回值：大写字母的ASCII码值，不区分大小写。 |
|
charCode |
字符码 只在keypress下支持，只支持字符键 |
