外观模式
document.onclick=function(e){
e.preventDefault();
if(e.target!==document.getElementById('myInput')){
hidePageAlert();
}
};
function hidePageAlert(){
}
function addEvent(dom,type,fn){
if(dom.addEventListener){
dom.addEventListener(type,fn,false);
}else if(dom.attachEvent){
dom.attachEvent('on'+type,fn);
}else{
dom['on'+type]=fn;
}
}
var myInput=document.getElementById("myInput");
addEvent(myInput,'click',function(){
console.log('绑定第一个事件');
});
addEvent(myInput,'click',function(){
console.log('绑定第二个事件');
});
addEvent(myInput,'click',function(){
console.log('绑定第三个事件');
});
var getEvent=function(event){
return event || window.event;
};
var getTarget=function(event){
var event=getEvent(event);
return event.target || event.srcElement;
};
var preventDefault=function(event){
var event=getEvent(event);
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;
}
};
addEvent(document,'click',function(e){
preventDefault(e);
if(getTarget(e)!==document.getElementById('myInput')){
hidePageAlert();
}
});
var Method={
getId:function(id){
return document.getElementById(id);
},
css:function(id,key,value){
this.getId(id).style[key]=value;
},
attr:function(id,key,value){
this.getId(id)[key]=value;
},
html:function(id,html){
this.getId(id).innerHTML=html;
},
on:function(id,type,fn){
this.getId(id)['on'+type]=fn;
}
};
Method.css('box','background','red');
Method.attr('box','className','box');
Method.on('box','click',function(){
console.log(this);
Method.css('box','width','500px');
});
var Method={
getId:function(id){
return document.getElementById(id);
},
css:function(id,key,value){
this.getId(id).style[key]=value;
return this;
},
attr:function(id,key,value){
this.getId(id)[key]=value;
return this;
},
html:function(id,html){
this.getId(id).innerHTML=html;
return this;
},
on:function(id,type,fn){
this.getId(id)['on'+type]=fn;
return this;
}
};
Method.on('box','click',function(){
console.log(this);
Method.css('box','width','500px');
}).css('box','height','500px');