事件处理：
1、HTML事件处理程序
例子：
<input type="button" id="btn" value="click me" onclick="alert('Hello!');">
或者：
<input type="button" id="btn" value="click me" onclick="show()">
<script>
function show(){
alert("Hello world!");
}
</script>
缺点：HTML与JavaScript代码紧密耦合在一起，不方便修改。
2、DOM零级处理程序
例子：
<input type="button" id="btn" value="click me">
<script>
var btn=document.getElementById("btn");
btn.onclick=function(){
alert("....");
}
</script>
这段代码的作用是添加点击事件，若要取消点击事件，只需"btn.onclick=null;"即可。
3、DOM二级事件处理程序
定义了两个方法：addEventListener()和removeEventListener()，分别是用于指定和删除事件处理程序的操作。
两种方法都有三个参数：
（1）要处理的事件名；
（2）事件处理程序的函数；
（3）布尔值：true（在捕获事件中调用）；false（在冒泡事件中调用）。
例子：
var btn=document.getElementById("btn");
btn.addEventListener('click',function(){alert('Hello');},false);
要删除只能用removeEventListener()，而不能用“....=null”。
4、IE事件处理程序
attachEvent()和detachEvent()，分别是添加和删除事件。
两个参数：
（1）要处理的事件名；
（2）事件处理程序的函数。
不使用第三个参数的原因是：IE8以及更早的浏览器版本只支持事件冒泡。
用法：
btn.attachEvent('onclick',function(){.....});
注意是"onclick" "onmouseover" 还是用"click" "mouseover"等，有没有加"on"。
5、跨浏览器的事件处理程序
做法是：所有的事件处理程序封装在一个对象内。
如下代码：
/*
* @Author: 陈陈陈
* @Date: 2017-09-03 10:18:07
* @Last Modified by: 陈陈陈
* @Last Modified time: 2017-09-03 12:19:34
*/
var eventUtil{
/*添加事件处理程序 */
addHandler:function(element,type,handler){//参数表元素、事件类型、函数
if(element.addEventListener){//DOM 2级事件处理程序
element.addEventListener(type,handler,false);//false表冒泡事件调用；true表捕获事件调用
}else if(element.attachEvent){//IE事件处理程序
element.attachEvent('on'+type,handler);//没有第三个参数的原因是：IE8及更早的浏览器版本只支持事件冒泡
}else{//DOM 0级事件处理程序
element['on'+type]=handler;
}
},
/*删除事件处理程序 */
removeHandler:function(element,type,handler){//删除事件处理程序，参数表元素、事件类型、函数
if(element.removeEventListener){//DOM 2级事件处理程序
element.removeEventListener(type,handler,false);//false表冒泡事件调用；true表捕获事件调用
}else if(element.detachEvent){//IE事件处理程序
element.detachEvent('on'+type,handler);//没有第三个参数的原因是：IE8及更早的浏览器版本只支持事件冒泡
}else{//DOM 0级事件处理程序
element['on'+type]=null;
}
},
/*以下一些方法是关于事件对象的获取
改善浏览器的兼容性，将DOM事件对象和IE事件对象合并在一起
1、DOM的事件对象：
(1)type:事件类型
(2)target:事件目标
(3)stopPropagation()方法:阻止事件冒泡
(4)preventDefault()方法:阻止事件的默认行为
2、IE中的事件对象：
(1)type:事件类型
(2)srcElement:事件目标
(3)cancelBubble属性:阻止事件冒泡 true表示阻止冒泡，false表示不阻止
(4)returnValue属性:阻止事件的默认行为
*/
getEvent:function(event){
return event?event:window.event;
},
getTarget:function(event){
return target || srcElement;
},
stopPro:function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
},
preventDef:function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;
}
},
}