<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>外觀模式</title>
<!--爲一組複雜的子系統接口提供一個更高級的統一接口，通過這個接口使得對子系統接口的訪問更容易，即對底層封裝來簡化用戶使用
外觀模式中定義的統一接口，可以解決瀏覽器兼容性問題，如EventUtil對象(這只是外觀模式應用的一部分)，很多代碼庫通過外觀模式封裝多個功能，
簡化底層操作方法。-->
<script>
window.onload=function(){
var EventUtil={
addHandler:function(element,type,handler){
if(element.addEventListener){//存在DOM2級函數
element.addEventListener(type,handler,false);
}else if(element.attachEvent){//IE瀏覽器
element.attachEvent(type,handler,false);
}else{
element["on"+type]=handler;//DOM0級事件，只能定義同類事件一次，多則覆蓋，儘量避免此類事件函數添加。
}
},
removeHandler:function(element,type,handler){ //取消事件
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,handler);
}else{
element["on"+type]=null;
}
},
getEvent:function(event){ //使用這個方法跨瀏覽器取得event對象
return event?event:window.event;
},
getTarget:function(event){ //返回事件的實際目標
return event.target||event.srcElement;
},
preventDefault:function(event){ //阻止事件的默認行爲
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;
}
},
stopPropagation:function(event){ //立即停止事件在DOM中的傳播
//避免觸發註冊在document.body上面的事件處理程序
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
}
}
var btn1 = document.getElementById("myBtn1");
var handler = function(){
alert("hello");
}
EventUtil.addHandler(btn1, "click", handler);
}
</script>
</head>
<body>
<button id="myBtn1">按我</button>
<p>按F12打開調試界面</p>
</body>
</html>
