一，事件流
1，事件冒泡（IE）
事件从最开始由最具体的元素(元档中层次最深的那个节点)接收，逐级向上传播到较不具体的节点（文档）
2，事件捕获（Netscape）
事件从不太具体的节点开始接收，然后最具体的节点最后接收事件，用意在于事件到达预定目标之前捕获他
3，DOM事件流
DOM2事件规定的事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段，
实际的目标在事件捕获阶段不会接收到事件，处于目标阶段时，事件发生，并在事件处理中被看成冒泡阶段的一部分，然后冒泡阶段发生事件被传回文档
一般浏览器都会在捕获阶段触发事件对象上的对象，结果就有两个机会在目标对象上面操作事件
二，事件处理程序
响应事件的函数叫做事件处理程序，以on开头
1，HTML事件处理程序
事件处理程序中的代码，有权访问全局作用域中的任何代码
元素的<input type="button" value="Click" onclick = "showMessage()" /> 这样创建一个封装着元素属性值的函数，这个函数中会有一个局部变量 event，也就是事件对象
当函数定义在事件之后，会引发抛出错误
2，DOM0级事件处理程序
通过js指定事件处理程序的传统方法，btn.onclick = function(){};
可以在事件处理程序中通过this访问元素的任何属性和方法，以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理
可以删除通过DOM0级方法指定的事件处理程序，btn.onclick = null;
事件处理程序会在其所属元素的作用域内运行,且只支持一个事件处理程序
3，DOM2级事件处理程序
addEventListener() 接收三个参数，要处理的事件名，作为事件处理程序的函数和一个布尔值，true表示捕获阶段调用事件处理程序，false表示在冒泡阶段 调用事件处理程序
可以添加多个函数，btn.addEventListener("click","function(){}",false);添加的函数按顺序被执行
removeEventListener(),用来移除通过addEventListener()添加的函数，移除时添加的参数同上，所以通过addEventListener()添加的匿名函数无法被移除
大多数情况下都将事件处理程序添加到事件流的冒泡阶段，极大可能的兼容多种浏览器
4，IE事件处理程序
attachEvent(),接收两个参数，事件处理程序名称与事件处理程序函数，IE只支持事件冒泡，所以通过添加的事件处理程序会添加到冒泡阶段
btn.attachEvent("onclick","function(){}"); 第一个参数区别于addEventListener()中的click
可以用来添加多个事件处理程序，执行的顺序与添加事件的顺序相反，区别于addEventListener()
deattachEvent()用来移除通过attachEvent()添加的事件处理程序，匿名函数不能被移除
事件处理程序会在全局作用域中运行
5，跨浏览器的事件处理程序
addHandler()，分别使用DOM0，DOM2，IE方法来添加事件，这个方法属于EventUtil的对象，
接收三个参数，要操作的元素，事件名称，事件处理程序函数
对应的移除方法为removeHandler(),用来移除之前添加的事件处理程序，不仅是addHandler()创建的
var EventUtil = { addHandler:function(element,type,handler){ if(element.addEventListener){ element.addEventListener(type,hander,false); }else if(element.attchEvent){ element.attachEvent("on" + type,handler); }else{ element["on" + type] = handler; } }, removeHandler:function(element,type,handler){ if(element.removeEventListener){ element.removeEventListener(type,handler,false); }else if(element.detachEvent){ element.detachEvent("on" + type,handler); }else{ element["on" + type] = null; } } }; EventUtil.addHandler(btn,"click",handler);调用函数
三，事件对象
1，DOM中的事件对象
1）兼容DOM的浏览器会将一个event对象传人到事件处理程序中，与指定事件处理程序时使用的方法无关，
2）HTML特性指定事件处理程序时，变量event中保存着event对象
3）event的属性和方法 currentTarget表示事件处理当前正在处理的元素，target事件的目标，type被触发的事件类型，
event.preventDefault() 用来取消事件的默认，在cancelable为true的情况下
event.stoPropagation() 取消事件的进一步捕获或冒泡
event.eventPhase属性 返回事件当前正处于事件流的哪个状态，1捕获阶段调用事件处理程序，2事件处理程序处于目标对象上，3冒泡阶段调用事件处理阶段
在事件处理程序内部，this始终等于currentTarget的值，通过event.type可以设置一个元素的不同事件
2，IE中的事件对象
1）在使用DOM0级方法添加事件处理程序时，event对象作为window对象的一个属性
2）使用attachEvent()添加事件处理程序，event对象作为参数被传入事件处理程序函数中
3）通过HTML特性指定的事件处理程序，通过event变量来访问event对象
4）cancelBubble，默认为false，设置为true可以取消事件冒泡
returnValue，默认为true，设置为false可以取消事件的默认行为
secElement，事件的目标
type，触发的事件类型
3，跨浏览器的事件对象
1）解决Event对象在各浏览器中的兼容问题
var EventUtil = { addHandler:function(element,type,handler){//代码省略}, getEvent:function(event){return event?event:window.event;}, getTarget:function(event){return event.target || event.srcElement;}, preventDefault:function(event){ if(event.preventDefault){ event.preventDefault(); }else{event.returnValue = false;} }, removeHandler:function(){//代码省略}, stopPropagation:function(event){ if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble = true; } }, };
2）使用getEvent方法时，必须假设有一个事件对象传人到事件处理程序中，而且要把该变量传给这个方法
btn.onclick = function(evnet){event = EventUtil.getEvent(event);};
3）使用getTarget方法，var target = EventUtil.getTarget(evnet);
4）preventDefault(), EventUtil.preventDefault(event);
5）stopPropagation(),EventUtil.stopPropagation(event);
四，事件类型
1，UI事件
1）load事件
当页面加载完成就会触发load事件
EventUtil.addHandler(window,"load",function(event){});
<body onload=""></body>
link标签上触发load事件（IE opera）确定样式表是否加载完成，只有添加了href属性和添加到文档中才开始加载样式表
script标签上触发load事件，以便开发人员确定动态加载的js文件，才会下载js文件，只有设置了src属性并将元素添加到文档中才开始下载js文件
注意:新图像不一定要从添加到文档后才开始下，设置了src属性便开始加载
2）unload事件
在文档被完全卸载后触发，只要用户从一个页面切换到另一个页面就触发unload事件,target值为Document
EventUtil.addHandler(window,"unload",function(event){});
<body onunload=""></body>
3）resize事件
在浏览器窗口被调整到一个新的高度或宽度时触发的事件，target值为Document
EventUtil.addHandler(window,"resize",function(event){});
浏览器的支持情况不同，不要添加大量代码，会崩溃
4）scroll事件
会在文档被滚动期间重复被触发，尽量不要添加大量代码
混杂模式下通过body的scrollLeft或scrollTop体现变化
标准模式下通过html的scrollLeft或scrollTop体现变化
5）abort事件，在用户停止下载过程中，如果嵌入的内容没有加载完，在object上触发
6）error事件，发生javascript发生错误时触发
7）select事件，当用户选择文本框中的一或多个字符时触发
2，焦点事件
document.hasFocus() 判断某元素是否获取到焦点
document.activeElement属性 获取当前正处焦点状态的元素
blur事件，在元素失去焦点时触发，没有冒泡，都支持
DOMFocusIn事件，在元素获得焦点时触发，与HTML的focus等价，但它冒泡Opera支持，DOM3废弃了它，选择了focusIn
DOMFocusOut事件，在元素失去焦点时触发，与HTML的blur等价，Opera支持，DOM3废弃了它，选择了focusOut
focus事件，在元素获得焦点时触发，不冒泡，都支持
focusin事件，在元素获得焦点时触发，与HTML的focus等价，但它冒泡
focusout事件，在元素失去焦点时触发，与HTML的blur等价
3，鼠标与滚轮事件
click事件，用户单击主鼠标按钮，或按下回车键触发
dbclick事件，用户双击主鼠标按钮时触发
mousedown事件，用户按下任意鼠标时触发，键盘不能触发
mouseenter事件，鼠标光标从元素外部首次移动到元素范围之内时触发，不冒泡，光标移动到后代元素上不会触发
mouseleave事件，位于元素上方的鼠标光标移动到元素范围之外时触发，不冒泡，光标移动到后代元素上不会触发
mousemove事件，鼠标指针在元素内部移动时重复的触发，键盘不能触发
mouseout事件，在鼠标位于一个元素的上方，用户将其移入到另一个元素时触发，键盘不能触发
mouseover事件，鼠标指针位于一个元素外部，然后用户首次移入另一个元素边界之内时触发，键盘不能触发
mouseup事件，用户释放鼠标时触发，键盘不能触发
1）客户区坐标位置
clientX 事件发生时鼠标指针在视口中的水平位置
clientY 事件发生时鼠标指针在视口中的垂直位置
视口仅是浏览器窗口的大小，不包括页面滚动的距离
2）页面坐标位置
pageX 鼠标光标在页面中的水平位置
pageY 鼠标光标在页面中的垂直位置
页面没有滚动的时候 pageX = clientX，pageY=clientY
3）屏幕坐标位置
screenX 鼠标指针相对于整个屏幕的水平位置
screenY 鼠标指针相对于整个屏幕的垂直位置
4）修改键
shift,ctrl,alt,meta(window)
对应shiftKey，ctrlKey，altKey，metaKey，属性值为布尔值，相应键被按下，则值为true，否则为false
if(event.shiftKey)则按下了此键
5）相关元素
mouseover：事件的主目标是获得光标的元素，相关的元素就是失去光标的元素
mouseout：事件的主目标是失去光标的元素，相关的元素是获得光标的元素
DOM通过event对象的relatedTarget属性提供了相关元素的信息，只对mouseover和mouseout事件有值，其余事件为null
IE中，mouseover事件触发是，IE的formElement属性中保存相关元素，mouseout事件触发时，toElement属性中保存着相关元素
var EventUtil = { getRelatedTarget:function(event){ if(event.relatedTarget){ return event.relatedTarget; }else if(event.formElement){ return event.formElement; }else if(event.toElement){ return event.toElement; }else{ return null; } }, };
6）鼠标按钮
对于mousedown，mouseup事件来说event对象中保存一个button属性
在DOM中，0表示主鼠标按钮，1表示中间鼠标（鼠标滚轮），2表示次鼠标按钮
IE8以前，0表示没有按下按钮，1表示按下主鼠标，2表示按下此鼠标，3表示同时按下主次鼠标，4表示按下滚轮鼠标，5表示按下滚轮和主鼠标，6表示按下滚 轮和次鼠标，7表示按下3个按钮
var EventUtil = { getButton:function(event){ if(document.implementation.hasFeature("MouseEvents","2.0")){ return event.button; }else{ switch(event.button){ case 0: case 1: case 3: case 5: case 7: return 0; case 2: case 6: return 2; case 4: return 1; } } }, };
7）更多的事件信息
DOM中event对象提供了detail属性，包含一个数值，表示给定位置上发生click事件的次数，mousedown，mouseup算一个click
如果mousedown和mouseup之间移动了位置，detail重置为0
IE中，aleLeft，布尔值，按下了alt键，值为true，altKey也为true，类似还有ctrlLeft，shiftLeft
offsetX,offsetY,光标相对于目标元素边界的x，y坐标
8）鼠标滚轮事件
IE6首次实现mousewheel事件，可以在任何元素上触发，最终都会冒泡到Document（IE8）或window（IE9,等）对象
mousewheel事件的event对象包含鼠标事件的所有标准信息，还包含一个wheelDelta属性，用户向前滚动wheelDelta是120的倍数，用户向后滚动 wheelDelta是-120的倍数
Opera9.5之前的版本wheelDelta正负值是相反的
firefox支持DOMMouseScroll事件，也是在鼠标滚动时触发，detail属性中保存信息，向前滚动，detail属性值是-3的倍数，向后滚动时detail是3的倍数，
该事件也可以在任何元素触发，最终会冒泡到window对象
解决兼容性
var EventUtil = { getWheelDelta:function(event){ if(event.wheelDelta){ return (client.engine.opera && client.engine.opera <9.5 ? -event.wheelDelta:event.wheelDelta); }else{ return -event.detail * 40; } }, };
使用事件如下
(function(){ function handleMouseWheel(event){ event = EventUtil.getEvent(event); var delta = EventUtil.getWheelDelta(event); alert(delta); } EventUtil.addHandler(document,"mouseWheel",handleMouseWheel); EventUtil.addHandler(document,"DOMMouseScroll",handleMouseWheel); })();
9）触摸设备
不支持dbclick事件，双击会放大画面，且不可改变
轻击可单击元素触发mousemove事件，如果此操作导致无效，则触发mousedown和mouseup和click事件
mousemove事件也会触发mouseover和mouseout事件
两个手指滑动会触发mouseWheel和scroll事件
10）无障碍性问题
使用click事件确保键盘也可以操作
4，键盘与文本事件
keydowm：用户按下任意键时触发，按住不放回重复触发
keypress：用户按下键盘上的字符键时触发，按住不放会重复触发
keyup：用户释放键盘上的按键时触发
如果用户按下字符键，会先触发keydown，然后触发keypress，最后释放时触发keyup
如果用户按下非字符键，只会触发keydown和keyup
文本事件textInput，将文本显示给用户前，文本插入文本框之前会触发
1）键码
event对象的keyCode属性会包含一个代码与键盘上一个特定的键对应
2）字符编码
发生keypress事件意味着按下的键会影响到屏幕中文本的显示，插入和删除键都会触发keypress事件
IE，Firefox，chrome，Safari的event对象都有个charCode属性，在keypress事件发生是包含值，代表按下的那个键的ASCII编码
兼容模式函数
var EventUtil = { getCharCode:function(event){ if(typeof event.charCode == 'number'){ return event.charCode; }else{ return event.keyCode; } }, };
取得字符编码后，使用String.fromCharCode()将其转换成实际的字符串
3）DOM3级变化
不支持charCode属性，包含两个新属性key和char
key属性取代keyCode，他的值是一个字符串，按下某个键，key的值就会取得相应的文本字符
char属性，在按下字符键时与key返回值相同，按下非字符键时值为null
IE9支持key属性，不支持char属性，safari和chrome支持keyIdentifier属性，在按下非字符键时与key相同，按下字符键时返回格式U+0000的字符串
location属性，是一个数值，表示按下了什么位置的键，0表示默认键盘，1表示左侧位置，2表示右侧位置，3表示数字小键盘，4表示移动设备键盘，5表示手柄
IE9支持location属性，Safari和chrome支持keyLocation属性，按下数字键盘值为3，否则为0
getModifierState()方法，接收一个参数，shift，control，altGraph，meta，如果指定的修改件是处于被按下的返回true，只有IE支持
4）textInput事件
用户在可编辑区域中输入字符就会触发的事件，替代keypress
keypress事件是任何可获得焦点的元素都可以触发，textinput只有可编辑区域才能触发
keypress在按下那些能够影响文本显示的键都会触发，textinput只会在用户按下能够输入实际字符的键才会触发
textInput的event对象中有data属性，保存用户输入的字符
textInput的event对中还有inputMethod属性，表示文本输入到文本框的方法（IE9）
0表示浏览器不确定怎么输入，1表示使用键盘，2表示文本时黏贴进来，3表示文本拖放进来，4表示使用IME输入
5表示通过表单选择某一项输入，6表示手写，7表示语音，8表示几种方法组合来，9表示脚本输入
5）设备中的键盘事件
任天堂wii会在用户按下wii遥控器上的按键时触发键盘事件
5，复合事件
var isSupported = document.implementation.hasFeature("CompositionEvent","3.0")
复合事件用于处理IME（输入法编辑器）的输入序列，可以让用户输入在物理键盘上找不到的字符，IME通常要按住多个键，
compositionstart：在IME的文本复合系统中打开时触发，表示开始输入了
compositionupdate：在向输入字段中插入字符时触发
compositionend：在IME的文本复合系统关闭时触发
data属性，在compositionstart事件发生时访问，包含正在编辑的文本，
在compositionupdate事件时发生访问，包含插入的新字符
在compositionend事件时发生访问，包含此次输入对话框中的所有字符
6，变动事件
var isSupported = document.implementation.hasFeature("MutationEvents","2.0");
DOMSubtreeModified：DOM结构发生变化时触发
DOMNodeInserted：一个节点作为子节点被插入到另一个节点中触发
DOMNodeRemoved：节点从其父节点中被移除时触发
DOMNodeInsertedIntoDcument：节点被直接插入文档或通过子树添加到文档时触发
DOMNodeRemovedFromDocument：节点从文档中移除，或通过子树被移除时触发
DOMAttrModified：特性被修改后触发
DOMCharacterDataModified：文本节点的值发生变化时触发
1）删除节点
使用removeChild和replaceChild()从DOM中删除节点时，
首先触发DOMNodeRemoved事件，事件的目标event.target是被删除的节点，event.relateNode属性中包含着目标节点的父节点的引用，此时节点尚未删 除，parentNode与evnet.relateNode相同，这个事件会冒泡，会在任何层次上处理
然后如果删除的节点包含子节点会触发DOMNodeRemovedFromDocument事件，事件不冒泡，只有直接给定其中一个子节点的事件处理程序才会被调用
最后触发DOMSubtreeModified事件，这个事件的目标是被移除的节点的父节点，此时的event对象不包含事件相关信息
2）插入节点
使用appendChild(),replaceChild(),insertChild()方法
首先触发DOMNodeInserted事件，event.target是被插入的节点，event.relateNode属性中是插入节点的父节点，事件触发时，节点已经插入到新的父节点 中，事件是冒泡的，可以在各个层次上处理
然后会在新插入的节点上触发DOMNodeInsertedIntoDocument事件，事件不冒泡，必须在插入节点之前为它添加事件处理程序event.target是新插入的节点
最后触发DOMSubtreeModified事件，触发于新插入节点的父节点
7，HTML5事件
1）contextmenu事件
用以表示何时应该显示上下文菜单，以便开发人员取消默认的上下文菜单而提供自定义的菜单
contextmenu是冒泡的，因此可以为Document指定一个事件处理程序，用以处理页面中发生的所有此类事件，事件的目标是发生用户操作的元素
在浏览器中取消这个事件，DOM兼容的浏览器中使用event.preventDefault()方法，IE中设置event.returnValue=false
contextmenu是鼠标事件，包含所有与光标位置有关的所有属性，通常使用contextmenu事件来显示自定义上下文才菜单，使用onclick处理程序来隐藏菜单
2）beforeunload事件
就是为了开发人员在页面卸载前阻止这一操作，事件会在浏览器被取消前触发，可以通过它阻止卸载
EventUtil.addHandler(window,"beforeunload",function(event){ evet = EventUtil.getEvent(event); var message = "I'm really going to miss you if you go"; event.returnValue = message; return message; });
3）DOMContentLoaded事件
在页面形成完整的DOM树之后就会触发，不理会图像，js文件，css文件或其他资源，load事件则在页面所有文件加载完成后执行
event.target = document，
对于不支持DOMContentLoaded事件的浏览器，页面加载期间设置一个时间为0毫秒的超时调用
setTimeout(function(){//事件处理程序},0);
4）readystatechange事件
提供与文档或元素的加载状态有关的信息，支持readystatechange事件的对象都有个readyState属性
属性值为uninitialized，对象存在但尚未初始化，loading，对象正在加载数据，loaded，加载完毕，interactive，可以操作对象了，但还没有完全加载， complete，对象已经加载完毕
除非把动态添加的元素添加到页面中，否则浏览器不会开始下载外部资源
5）pageshow和pagehide事件
firefox和Opera有一个特性，叫bfcache，用户在用浏览器前进后退的时候加快页面的转换速度，再次打开缓存的页面不会触发load事件
pageshow事件，在页面显示时触发，无论页面是否来自bfcache，在新加载的页面中，pageshow在load后触发
事件的目标是document，但必须将事件添加到window中,event对象中还有一个persistef属性，如果页面在bfcache中，为true
(function(){ var showCount = 0; EventUtil.addHandler(window,"load",function(){ alert(""); }); EventUtil.addHandler(window,"showpage",function(){ showCount ++; alert(""); }); })();
pagehide事件在浏览器卸载页面的时候触发，而且是在unload之前触发，同pageshow一样是在document上触发，但事件处理程序要添加到window上
pagehide事件的event对象保存persisted属性，在页面卸载后会被保存在bfcache中，则为true，反之为false
6）hashchange事件
在URL的参数列表(及URL中#号后面的所有字符串)发生变化的时候通知开发人员
hashchange事件处理程序添加给window对象，然后url发生变化就会触发该事件
此时event对象包括两个属性newURL和oldURL，两个属性分别保存着参数列表变化前后完整的URL
不支持这两个属性的情况用location对象来确定当前的参数列表location.hash
检测方法var isSupported = ("onhashchange" in window) && (document.documentMode === undefined || document.documentMode > 7)
8，设备事件
1）orientationchange事件
以便开发人员能够确定用户何时将设备查看模式切换为纵向查看模式
window.orientationchange包含3个值，0表示肖像模式，90表示向左旋转的横向模式，-90表示向右旋转的横向模式，180表示iphone头向下(尚不支持)
2）MozOrientation事件
当设备的加速计检测到设备方向改变时，就会触发这个事件
window.MozOrientation的event对象包含三个属性，x，y，z，值介于1到-1中
静止状态（0,0,1），如果设备向右倾斜x值减小，向左倾斜x值变大，设备远离用户方向倾斜y减小，反之y变大
z轴检测到垂直加速度，1表示静止不动，移动设备时减小（失重状态下值为0）
只有带加速计的设备才支持此事件
3）deviceorientation事件
同样是在加速计检测到设备方向发生变化时在window上触发，意图是告诉开发人员设备在空间中朝向
设备静止放置（0,0,0），x轴方向从左往右，y轴方向从上往下，z轴从前往后
window.deviceorientation的event对象包含5个属性
alpha：围绕z轴旋转时（左右旋转），y轴的度数差，0-360的浮点数
beta：围绕x轴旋转时（前后旋转），z轴的度数差，0-360的浮点数
gamma：围绕y轴旋转时（扭曲设备），z轴的度数差，0-360的浮点数
absolute：布尔值，表示设备是否返回一个绝对值
compassCalibrated：布尔值，表示设备的指南之是否校准过
4）devicemotion事件
告诉开发人员设备什么时候移动，能够检测到设备是不是正在往下掉，或在移动
window.devicemotion的event对象包含四个属性
acceleration：包含x,y,z属性的对象，不考虑重力的情况下，告诉你在每个方向上的加速度
accelerationIncludingGravity：包含x,y,z属性的对象，考虑z轴方向重力情况下，返回每个方向上的加速度
interval：以毫秒表示的时间值，必须在另一个devicemotion事件触发前传人
rotationRate：一个包含表示方向的alpha，beta和gamma属性的对象
9，触摸与手势事件
1）触摸事件
touchstart：当手指触摸屏幕时触发，即便有一个手指在上面也同样触发
touchmove：手指滑动时触发，调用preventDefault()可以阻止滚动
touchend：手指从屏幕上移开时触发
touchcancle：系统停止跟踪触摸时触发
事件都可以冒泡，都可以取消，
触摸事件的event对象常见的DOM属性：bubbles，cancelable，view，clientX，clientY，screenX，screenY，detail，altkey，shiftkey，ctrlkey， metakey
触摸事件用于跟踪触摸的属性：
touches：表示当前跟踪的触摸操作的Touch对象的数组
targetTouches：表示特定于事件目标的Touch对象的数组
changeTouches：表示自上次触摸以来发生了什么改变的Touch对象的数组
每个Touch对象包含下列属性
clientX，clientY，触摸目标在视图中的x，y坐标
identifier，标识触摸的唯一ID
pageX，pageY，触摸目标在页面中的x，y坐标
screenX，screenY，触摸目标在屏幕中的x，y坐标
target，触摸的DOM节点目标
2）手势事件
gesturestart：当一个手指已经按在屏幕上而另一个手指又触摸屏幕时触发
gesturechange：当触摸屏幕的任何一个手指的位置发生变化时触发
gestureend：当任何一个手指从屏幕上面移开时触发
事件可以冒泡，都可以取消
手势事件的event对象常见的DOM属性：bubbles，cancelable，view，clientX，clientY，screenX，screenY，detail，altKey，shfitKey，ctrlKey， metaKey
rotation属性，表示手指变化引起的旋转角度，负值表示逆时针，正值表示顺时针。scale表示两个手指间距离的变化情况
五，内存和性能
1，事件委托
事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件，例如clock事件会冒泡到document层次
可以为整个页面指定一个onclick事件处理程序，
2，移除事件处理程序
造成内存性能问题有，从文档中移除带有事件处理程序的元素，使用innerHTML替换页面中带有事件处理程序的元素
最好在移除带有事件处理程序的元素前，将事件设置为null，btn.onclick = null
卸载页面之前通过onunload事件处理程序移除所有事件处理程序，通过事件委托可以更好地解决，通过load事件处理程序添加的东西，最后都通过onunload 事件处理程序移除
六，模拟事件
1，DOM中的事件模拟
document.createEvent()，可以用来创建新的事件event对象，接收一个参数，表示要创建的事件类型的字符串
UIEvents：一般化的UI事件，鼠标事件和键盘事件都继承UI事件
MouseEvents：鼠标事件，
MutationEvents：一般的DOM变动事件
HTMLEvents：一般化的HTML事件
使用dispatchEvent()方法可以触发事件，传入一个参数要触发的event对象。
1）模拟鼠标事件
document.createEvent("MouseEvents");
返回一个initMouseEvent()方法，接收15个参数
type（字符串）：要触发的事件类型
bubbles（布尔值）：是否应该冒泡，冒泡为true
cancelable（布尔值）：是否可以取消事件
view：与事件关联的视图，这个参数几乎总是要设置为document.defaultView
detail（整数）：与事件相关的详细信息
screenX，ScreenY，屏幕的坐标
clientX，clientY，视口的坐标
ctrlKey，altKey，shiftKey，metaKey，是否按下了修改键，默认值为false
button（整数）：表示按下了哪个键，默认为0
relatedTarget（对象）：表示与事件相关的对象，mouseover和mouseout时使用
var btn = document.getElementById("mybtn");
var event = document.createEvent("MouseEvents");
event.initMouseEvent("",.....);15个参数一一指定
btn.dispatchEvent(event);
2）模拟键盘事件
DOM3中
document.createEvent("KeyboardEvent")
返回一个initKeyEvent()方法，接收8个参数
type（字符串）：触发的事件类型
bubbles（布尔值）：表示事件是否应该冒泡，默认为true
cancelable（布尔值）：表示是否可以取消事件，默认为true
view：与事件关联的视图，几乎总为document.defaultView
key（布尔值）：按下的键码
location（整数）：按下了哪里的键，0表示主键，1表示左，2表示右，3表示数字键盘，4表示移动设备，5表示手柄
modifiers（字符串）：空格分隔的修改键列表
repeat（整数）：在一行中按了这个键的次数
DOM3不提倡使用keypress事件，因此只能模拟keydown和keyup事件
fireFox中
document.createEvent("KeyEvents");
返回一个initKeyEvent()方法，接收10个参数
type（字符串）：触发的事件类型
bubbles（布尔值）：是否冒泡，应该设为true
cancelable（布尔值）：事件能否取消
view：与事件关联的视图，几乎总是为document.defaultView
ctrlKey,altKey,shiftKey,metaKey,是否按下了修改键，默认为false
keyCode（整数）：被按下或释放的键码
charCode（整数）：通过按键生成的字符的ASCII码
通过document.dispatchEvent(event)触发事件
在其他浏览器中
var event = document.createEvent("Events");
event.initEvent(type,bubbles,cancelable);
event.view = document.defaultView;
....
元素.dispatchEvent(event);触发事件
3）模拟其他事件
变动事件
document.createEvent("MutationEvents");包含一个initMutationEvent()方法
接收type，bubbles，cancelable，relatedNode，preValue，newValue，attrName，attrChange
HTML事件
document.createEvent("HTMLEvents");使用initEvent()方法来初始化
元素.dispatchEvent(event)；触发创建的事件
4）自定义DOM事件
document.createEvent("CustomEvent")，返回initCustomEvent()方法，接收4参数
type(字符串)：触发的事件类型
bubbles(布尔值)：是否冒泡，
cancelable(布尔值)：表示事件是否可以取消
detai(对象)：任意值，保存event对象的detai属性中可以像分派其他事件一样在DOM中分派创建的自定义事件对象
event = document.createEvent("CustomEvent");
event.initCustomEvent("myevent",true,false,"hello world");
div.diapatchEvent(event);
2，IE中的事件模拟
IE8及之前版本创建模拟事件与DOM中模拟事件的思路相似，先创建event对象，为其指定相应信息，使用该对象来触发事件
document.createEventObject()创建event对象，这个方法不接受参数，返回一个event对象
然后手工为这个对象添加所有必要的信息，
最后一步是目标上调用firstEvent()方法会自动为event对象添加srcElement和type属性，其他属性手工添加
var btn = document.getElementById("");
var event = document.createEventObject();
event.属性 = //初始化
btn.firstEvent("onclick",evnet);