<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件注册</title>
</head>
<body>
<button id="btn" value="按钮">按钮</button>
<script type="">
window.onload = function(){
var btn = document.getElementById("btn");
var handler = function(){
alert("thanks!");
}
//addEventListener(事件类型不要加“on”,事件发生时调用的函数，布尔值一般为false若为true函数将注册为捕获时间处理程序)
if (btn.addEventListener) {//ie8及之前版本外的所有浏览器支持的标准事件模型
btn.addEventListener("click", handler, false);
} else if(btn.attachEvent){//兼容ie9以下版本
btn.attachEvent("onclick", handler);//attachEvent(事件类型要加“on”,事件发生时调用的函数)
}else{
btn.onclick = handler;//普通注册事件
}
//封装自己的 句柄事件
var myUtilEvent = {
myAddHandler:function(element, eType, hanlder){//添加句柄
if(element.addEventListener){//ie8及之前版本外的所有浏览器支持的标准事件模型
element.addEventListener(eType, hanlder, false);
}else if(element.attachEvent){
element.attachEvent(eType, hanlder);//兼容ie9以下版本
}else{
element["on" + eType] = hanlder;
}
},
myRemoveHandler:function(element, eType, hanlder){//删除句柄
if(element.removeEventListener){
element.removeEventListener(eType, hanlder, false);
}else if(element.detachEvent){
element.detachEvent("on" + eType, hanlder);
}else{
element["on" + eType] = null;
}
}
}
//封装后上面即可这样调用，跟上面的结果一样
myUtilEvent.myAddHandler(btn, 'click', handler);
}
</script>
</body>
</html>