事件

事件总共分为 html中添加事件，DOM0级事件，DOM2级事件

html中添加事件

<input type="button" id="btn1" value="html" οnclick="showMes()" />

function showMes(){
		alert('hello ');
	}

js代码是添加在html中的，和html耦合很密切，修改起来很不方便

DOM0级添加事件

DOM0级呢是把元素从html中提取出来，在js中给他赋予事件。

<input type="button" id="btn2" value="dom0级" />
var btn2 = document.getElementById('btn2');
	btn2.onclick = function(){
		alert('dom0');
	}

可以删除事件，用btn2.οnclick= null；

DOM2级添加事件

<input type="button" id="btn3" value="dom2级" />
var btn3=document.getElementById('btn3');
	btn3.addEventListener('click',showMes,false);

第一个参数是什么类型的事件，第二个参数是执行什么函数，第三个参数是以什么方式触发。true代表事件捕获，false代表事件冒泡

DOM2事件必须把on去掉

删除事件可以用 btn3.removeEventListener('click',showMes,false);

这种方式可以给一个元素添加多个事件，事件是按添加先后顺序执行的。

IE事件处理程序

<input type="button" id="btn4" value="IE处理" />
var btn4 = document.getElementById("btn4");
	btn4.attachEvent('onclick',showMes);

attachEvent只接受两个参数，第一个参数是事件类型，这里要把on加上去，第二个参数是执行什么函数

 删除事件是detachEvent();函数，

	btn4.detachEvent('onclick',showMes;

IE事件处理程序只有ie8之前的版本和Opera浏览器支持，其他浏览器支持DOM2，再低的只能支持DOM0级的

处理跨浏览器事件处理

var eventUtil ={
			addHandler:function(element,type,handler){
				if (addEventListener) {
					element.addEventListener(type,handler,false);//DOM2
				}else if (attachEvent) {			
					element.attachEvent("on"+type,handler); //IE
				}else {
					element['on'+type] = handler;  //dom0
				}
			},
			removeHandler:function(element,type,handler){
				if(removeEventListener){
					element.removeEventListener(type,handler,false);
				}else if (detachEvent) {
					element.detachEvent('on'+type,handler)
				}else {
					element['on'+type]= null;
				}
			}
		}
		eventUtil.addHandler(btn4,'click',showMes);
		eventUtil.removeHandler(btn4,'click',showMes);

定义一个对象，把添加事件删除事件封装在里面，事件类型要去掉on，因为在使用过程中添加on比删除on更简单。

这样一个整个的代码可以在任何浏览器中使用