<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM事件流</title>
</head>
<body>
<div id="box">
<input type="button" value="按钮1" id="btn1" onclick="showMessage()">
<input type="button" value="按钮2" id="btn2">
<input type="button" value="按钮3" id="btn3">
</div>
<script >
//以下是定义showMes函数：后面可以调用，btn1也可直接调用(HTML事件处理程序，缺点在于js和html的函数名必须随时保证一致，修改起来太麻烦)。
function showMessage(){
alert("Hello world!");
}
//以下是通过DOM0级的方式为按钮2添加事件(缺点在于只能添加一个事件)。
var btn2 = document.getElementById("btn2");
btn2.onclick=function(){
alert("这是通过DOM0级添加的事件");
}
//btn2.onclick=null//删除这一事件（要生效请取消本行代码前的注释符）
//以下是通过DOM2级方式为按钮3添加事件（包含跨浏览器兼容处理方式）
var btn3 = document.getElementById("btn3");
//此处开始通过能力检测的方式，解决跨浏览器兼容问题
var eventUtil=
{
//添加句柄
addHandler:function(element/*给谁添加*/,type/*添加什么动作*/,handler/*添加后有什么效果*/)
{
//以下是针对支持DOM2级的浏览器
if(element.addEventListener/*如果你支持element的addEventListener*/){
element.addEventListener(type/*在DOM2级中所有动作的“on”前缀都要去掉，如onclick/onmouseover等，所以此处的type参数使用的是click,而不是onclick*/,handler/*触发handler的操作*/,false/*事件冒泡流布尔值*/);
}
//以下是针对IE浏览器
else if(element.attachEvent/*如果你支持element的attachEvent*/){
element.attachEvent("on"+type/*在IE中要使用“on”的前缀，所以这里要加上字符串“on”*/,handler/*触发handler的操作*/);
}
//以下是针对不支持DOM2级和IE的老版本浏览器，则使用DOM0级来添加
else{
element["on"+type]/*注释1：关于中括号---element.onclick=element["onclick"]；注释2：关于“‘on’+type”---此处在调用type参数，但是缺少"on"，而函数element后面不能通过点或者加号来直接连接字符串，所以使用率中括号*/=handler/*触发handler的操作*/;
}
}
//删除句柄（也即删除事件）
removeHandler:function(element/*给谁添加*/,type/*添加什么动作*/,handler/*添加后有什么效果*/)
{
//以下是针对支持DOM2级的浏览器
if(element.removeEventListener/*如果你支持element的removeEventListener*/){
element.removeEventListener(type/*在DOM2级中所有动作的“on”前缀都要去掉，如onclick/onmouseover等，所以此处的type参数使用的是click,而不是onclick*/,handler/*触发handler的操作*/,false/*事件冒泡流布尔值*/);
}
//以下是针对IE浏览器
else if(element.detachEvent/*如果你支持element的detachEvent*/){
element.detachEvent("on"+type/*在IE中要使用“on”的前缀，所以这里要加上字符串“on”*/,handler/*触发handler的操作*/);
}
//以下是针对不支持DOM2级和IE的老版本浏览器，则使用DOM0级来添加
else{
element["on"+type]/*注释1：关于中括号---element.onclick=element["onclick"]；注释2：关于“‘on’+type”---此处在调用type参数，但是缺少"on"，而函数element后面不能通过点或者加号来直接连接字符串，所以使用率中括号*/=null/*使它的值为空，也即删除该事件功能*/;
}
}
}
//跨浏览器事件处理程序代码完毕(删除句柄的代码块被注释，如需生效，请接触注释)
eventUtil.addHandler(btn3,"click",showMessage);
//eventUtil.removeHandler(btn3,"click",showMessage);
</script>
</body>
</html>袁民成