<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html?xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
<title>事件處理程序</title>
</head>
<body>
????<div?class="box">
????????<input?type="button"?value="按鈕1"??id="btn1"?onclick="showMes()"/>
????????<input?type="button"?value="按鈕2"??id="btn2"?/>
????????<input?type="button"?value="按鈕3"??id="btn3"?/>
????</div>
????<script>
??????function?showMes(){
alert('hello,world!')
????}
????????var?btn2?=?document.getElementById("btn2");
var?btn3?=?document.getElementById("btn3");
btn2.onclick?=?function(){
alert('這是用DOM0級添加的事件');
}
btn2.onclick?=?null;
/*btn3.addEventListener('click',showMes,false);
btn3.addEventListener('click',function(){
alert(this.value);
????},false);
????//btn3.removeEventListener('click',showMes,false);*/
//跨瀏覽器事件處理程序
var?eventUtil?=?{
????//添加句柄
addHandler:function(element,type,handler){
if(element.addEventListener){
element.addEventListener(element,type,false);
}else?if(element.attachEvent){
element.attachEvent("on"+type,handler);??
}else{
element["on"+type]=handler;
}
},
//刪除句柄
removeHandler:function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(element,type,false);
}else?if(element.detachEvent){
element.detachEvent("on"+type,handler);?
}else{
element["on"+type]?=?null;
}
}
}
eventUtil.addHandler(btn3,'click',showMes);
????</script>
</body>
</html>
2016-07-06
恩...因為你的DOM2寫錯了，
是element.addEventListener(type,handler,false);?
不是你寫的element.addEventListener(element,type,false);?