<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>跨浏览器事件处理程序</title>
<!-- 针对IE8及以下版本 -->
</head>
<body>
<script>
//添加事件
function addHandler(element,type,handler){
//element:事件对象
//type:事件类型
//handler:事件句柄
if (element.addEventListener){ //判断浏览器是否支持该语句（chrome/opera/IE9支持）
element.addEventListener(type,handler,false);
}else if(element.attachEvent){ //判断浏览器是否支持该语句（IE8及以下版本支持）
element.attachEvent("on"+type,handler);
}else{
element["on"+type]=handler;//以上两种都不支持时，执行DOM0级事件
}
}
//移除事件
function removeHandler(element,type,handler){
if (element.removeEventListener){ //判断浏览器是否支持该语句（chrome/opera/IE9支持）
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){ //判断浏览器是否支持该语句（IE8及以下版本支持）
element.detachEvent("on"+type,handler);
}else{
element["on"+type]=handler;//以上两种都不支持时，执行DOM0级事件
}
}
</script>
<!-- 测试效果 -->
<button id="btn">点击</button><!-- 创建按钮 -->
<script>
var btn=document.getElementById("btn");//获取按钮
//事件句柄
var tan=function (){
alert("弹框");
}
addHandler(btn,"click",tan);//调用添加事件函数
removeHandler(btn,"click",tan);//调用移除事件函数
</script>
</body>
</html>
