作者: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);