<!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函數(shù)：后面可以調(diào)用，btn1也可直接調(diào)用(HTML事件處理程序，缺點在于js和html的函數(shù)名必須隨時保證一致，修改起來太麻煩)。
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參數(shù)使用的是click,而不是onclick*/,handler/*觸發(fā)handler的操作*/,false/*事件冒泡流布爾值*/);
????}
????//以下是針對IE瀏覽器
????else?if(element.attachEvent/*如果你支持element的attachEvent*/){
????element.attachEvent("on"+type/*在IE中要使用“on”的前綴，所以這里要加上字符串“on”*/,handler/*觸發(fā)handler的操作*/);
????}
????//以下是針對不支持DOM2級和IE的老版本瀏覽器，則使用DOM0級來添加
????else{
????element["on"+type]/*注釋1：關(guān)于中括號---element.onclick=element["onclick"]；注釋2：關(guān)于“‘on’+type”---此處在調(diào)用type參數(shù)，但是缺少"on"，而函數(shù)element后面不能通過點或者加號來直接連接字符串，所以使用率中括號*/=handler/*觸發(fā)handler的操作*/;
????}
????}
????//刪除句柄（也即刪除事件）
????removeHandler:function(element/*給誰添加*/,type/*添加什么動作*/,handler/*添加后有什么效果*/)
????{
????//以下是針對支持DOM2級的瀏覽器
????if(element.removeEventListener/*如果你支持element的removeEventListener*/){
????element.removeEventListener(type/*在DOM2級中所有動作的“on”前綴都要去掉，如onclick/onmouseover等，所以此處的type參數(shù)使用的是click,而不是onclick*/,handler/*觸發(fā)handler的操作*/,false/*事件冒泡流布爾值*/);
????}
????//以下是針對IE瀏覽器
????else?if(element.detachEvent/*如果你支持element的detachEvent*/){
????element.detachEvent("on"+type/*在IE中要使用“on”的前綴，所以這里要加上字符串“on”*/,handler/*觸發(fā)handler的操作*/);
????}
????//以下是針對不支持DOM2級和IE的老版本瀏覽器，則使用DOM0級來添加
????else{
????element["on"+type]/*注釋1：關(guān)于中括號---element.onclick=element["onclick"]；注釋2：關(guān)于“‘on’+type”---此處在調(diào)用type參數(shù)，但是缺少"on"，而函數(shù)element后面不能通過點或者加號來直接連接字符串，所以使用率中括號*/=null/*使它的值為空，也即刪除該事件功能*/;
????}?
????}
???}
???//跨瀏覽器事件處理程序代碼完畢(刪除句柄的代碼塊被注釋，如需生效，請接觸注釋)
???eventUtil.addHandler(btn3,"click",showMessage);
???//eventUtil.removeHandler(btn3,"click",showMessage);
</script>
</body>
</html>
為什么我還沒有調(diào)用removehandler，它就已經(jīng)生效了？我只有在把這一大段注釋掉的時候，其他代碼才有效。
袁民成
2016-03-21 20:06:33
