[Event]事件（高程版）（二）事件处理程序 博客分类： Web前端-JS客户端 浏览器attachEventaddEventListener

作者：zccst

<input type="button" id="btn1" value="我是按钮" />

1，DOM0级 优点是兼容所以浏览器

	/* 1， DOM0级 优点是兼容所以浏览器*/
	var btn1 = document.getElementById("btn1");
	btn1.onclick=function(e){
		alert("Button Clicked");
		e.stopPropagation();//注释的话，会继续弹出"body Clicked"。IE8及以前不支持
	}
	btn1.onclick=null;//删除事件处理程序

2，DOM2级 标准浏览器

	/* IE7-8下不识别 */
	var btn1 = document.getElementById("btn1");
	btn1.addEventListener("click",function(e){
		alert(e.currentTarget);//[object HTMLInputElement]
		alert(e.target);       //[object HTMLInputElement]
		alert(e.srcElement);   //FF空，Chrome是[object HTMLInputElement]
		
		//this是当前元素
		alert(this === window);//false
	},false);

3，IE事件处理办法

/* 非IE下报错 */
	var btn1 = document.getElementById("btn1");
	btn1.attachEvent("onclick",function(e){
		alert(e.currentTarget);//undefined
		alert(e.target);       //undefined
		alert(e.srcElement);   //[object HTMLInputElement]

		//this是window
		alert(this === window);//true
	});

4，兼容各浏览器解决办法

	var EventUtil = {
		addEvent:function(element, type, handler){
			if(element.addEventListener){
				element.addEventListener(type, handler, false);
			}else if(element.attachEvent){
				element.attachEvent("on"+type, handler);
			}else{
				element["on"+type] = handler;
			}
		}
	};
	//调用方式
	var handler = function(){
		alert("clicked");
	}
	EventUtil.addEvent(btn1, "click", handler);