外观模式:为一组复杂的子系统接口提供一个更加高级的统一接口，在js中可以用于消除一些的底层的兼容性
function addEvent(dom,type,fn){
if(dom.addEventListener){ //支持dom2级操作
dom.addEventListener(type,fn)
}else if(dom.attachEvent){ //不支持dom2 但支持attach方法
dom.attachEvent('on'+type,fn)
}else{ //上面上个方法都不支持的方式
dom['on'+type] = fn;
}
}
比如为dom添加事件，这个时候需要考虑到浏览器之间的不同兼容性，老旧版本的兼容性；
通过使用对浏览器能力的检测(dom.addEventListener)来使用不同的方法来添加事件
function getEvent(event){
//标准浏览器返回event，IE返回window.event
return event || window.event;
}
//event在标准与ie中也存在差异
function getTarget(event){
var event = getEvent(event);
//event.target，IE返回event.srcElement
return event.target || event.srcElement;
}
//event.target在标准与ie中也存在差异
function preventDefault(event){
var event = getEvent(event);
if(event.preventDefault){ //标准浏览器的event.prevent()
event.preventDefault();
}else{
event.returnValue = false; //IE
}
}
//event.preventDefault在标准与ie中也存在差异
function getCss(dom){
// 利用判断是否支持currentStyle（是否为ie）
return dom.currentStyle ? dom.currentStyle : document.defaultView.getComputedStyle(dom, null);
}
例子如下:
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="index.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="d.css" />
<title></title>
<style>
.d1{
margin:0 auto;
width:100px;
height:30px;
}
</style>
</head>
<body>
<div id="d1" class="d1 d2">11111111111</div>
<script>
window.onload = function(){
var d = document.getElementById('d1');
addEvent(d,'click',function(){
console.log(123)
})
console.log(getCss(d).width);
console.log(getCss(d).position);
}
</script>
</body>
</html>
d.css
.d2{
position: relative;
}
