标签：
这一节，我们来解决IE顺序执行的问题
//demo.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="tool.js"></script>
<script type="text/javascript" src="base.js"></script>
<script type="text/javascript" src="demo.js"></script>
</head>
<body>
<input type="button" value="按钮" id="button"/>
</body>
</html>
//base.js
var $=function(_this)//调用,把this传递过来
{
return new Base(_this);
};
//对象式
function Base(_this)
{
//创建一个数组来获取节点和节点的数组
this.elements=[];//私有化，不共用
if(_this!=undefined)//这里的_this是一个对象，undefined也是个对象，却别typeof放回的带单引号的 “undefined”
{
this.elements[0]=_this; //把this放到数组的第一个
}
}
//获取ID节点
Base.prototype.getId=function(id)
{
this.elements.push(document.getElementById(id));
return this;
};
//获取元素节点
Base.prototype.getTagName=function(tag)
{
var tags=document.getElementsByTagName(tag);
for(var i=0;i<tags.length;i++)
{
this.elements.push(tags[i]);
}
return this;
};
//class获取
Base.prototype.getClass=function(className)
{
var all=document.getElementsByTagName("*");
for(var i=0;i<all.length;i++)
{
if(all[i].className==className)
{
this.elements.push(all[i]);
}
}
return this;
};
//获取某个节点
Base.prototype.eq=function(num)
{
var element=this.elements[num];
this.elements=[];//清空数组
this.elements[0]=element;//重新赋值
return this;
};
//设置CSS
Base.prototype.css = function (attr, value) {
for (var i = 0; i < this.elements.length; i ++) {
if (arguments.length == 1) {
return getStyle(this.elements[i], attr);//为什么这里需要return呢
}
this.elements[i].style[attr] = value;
}
return this;
}
Base.prototype.click=function(fn)
{
for(var i=0;i<this.elements.length;i++)
{
this.elements[i].onclick=fn;
}
return this;
};
//设置innerHtml 获取innerHTML
Base.prototype.html=function(value)
{
for(var i=0;i<this.elements.length;i++)
{
if(arguments.length==0)
{
return this.elements[i].innerHTML;
}
else
{
this.elements[i].innerHTML=value;
}
}
return this;
};
//添加class
Base.prototype.addClass=function(className)
{
for(var i=0;i<this.elements.length;i++)
{
if(!hasClass(this.elements[i],className))//判断是否已经有这个class
{
this.elements[i].className+=‘ ‘+className;
}
}
return this;
};
//移出class
Base.prototype.removeClass=function(className) //调用方法$().getClass("dd").addClass("a").addClass("b").removeClass("b");
{
for(var i=0;i<this.elements.length;i++)
{
if(hasClass(this.elements[i],className))//判断是否已经有这个class
{
this.elements[i].className=this.elements[i].className.replace(new RegExp(‘(\\s|^)‘+className+‘(\\s|$)‘),‘‘);
}
}
return this;
};
//添加link或style的css规则,不常用
Base.prototype.addRule=function(num,selectorText,cssText,position) //调用方法， $().addRule(0,"body","background:red",0)
{
var sheet=document.styleSheets[num];
if(typeof sheet.insertRule!="undefined")//w3c
{
sheet.insertRule(selectorText+"{"+cssText+"}",position);
}
else if(typeof sheet.addRule!="undefined")//iE
{
sheet.addRule(selectorText,cssText,position);//sheet.addRule("body","background:red",)
}
};
//移除link或style的css规则,不常用
Base.prototype.addRule=function(num,index) //调用方法， $().removeRule(0);
{
var sheet=document.styleSheets[num];
if(typeof sheet.deleteRule!="undefined")//w3c
{
sheet.deleteRule(index);
}
else if(typeof sheet.removeRule!="undefined")//iE
{
sheet.removeRule(index);//sheet.addRule("body","background:red",)
}
};
//设置hover方法
Base.prototype.hover=function(over,out)
{
for(var i=0;i<this.elements.length;i++)
{
this.elements[i].onmouseover=over;
this.elements[i].onmouseout=out;
}
return this;
};
//添加show
Base.prototype.show=function()
{
for(var i=0;i<this.elements.length;i++)
{
this.elements[i].style.display="block"
}
return this;
};
//添加hide
Base.prototype.hide=function()
{
for(var i=0;i<this.elements.length;i++)
{
this.elements[i].style.display="none"
}
return this;
};
//设置物体居中
Base.prototype.center=function(width,height)
{
var top=(getInner().height-width)/2;
var left=(getInner().width-height)/2;
for(var i=0;i<this.elements.length;i++)
{
this.elements[i].style.top=top+"px";
this.elements[i].style.left=left+"px";
}
return this;
};
//触发浏览器窗口事件
Base.prototype.resize = function (fn) {
for(var i=0;i<this.elements.length;i++)
{
var element=this.elements[i];
window.onresize=function()
{
fn();
if (element.offsetLeft > getInner().width - element.offsetWidth) {
element.style.left = getInner().width - element.offsetWidth + ‘px‘;
}
if (element.offsetTop > getInner().height - element.offsetHeight) {
element.style.top = getInner().height - element.offsetHeight + ‘px‘;
}
}
}
return this;
};
//锁屏功能
Base.prototype.lock=function()
{
for(var i=0;i<this.elements.length;i++)
{
this.elements[i].style.width=getInner().width+"px";
this.elements[i].style.height=getInner().height+"px";
this.elements[i].style.display="block";
document.documentElement.style.overflow = ‘hidden‘;
console.log( this.elements[i].style.width);
}
return this;
};
Base.prototype.unlock=function()
{
for(var i=0;i<this.elements.length;i++)
{
this.elements[i].style.display="none";
document.documentElement.style.overflow = ‘auto‘;
}
return this;
};
//base
Base.prototype.drag=function(){
for(var i=0;i<this.elements.length;i++)
{
this.elements[i].onmousedown=function(e)
{
preDef(e);
var e=getEvent(e);//阻止默认事件
var _this=this;
var diffX= e.clientX-_this.offsetLeft;
var diffY= e.clientY-_this.offsetTop;
if(_this.setCapture)//iE鼠标拖拽出了目标节点的时候不能再获取到事件
{
_this.setCapture();
}
document.onmousemove = function (e) {
var e = getEvent(e);
var left = e.clientX - diffX;
var top = e.clientY - diffY;
if (left < 0) {
left = 0;
} else if (left > getInner().width - _this.offsetWidth) {
left = getInner().width - _this.offsetWidth;
}
if (top < 0) {
top = 0;
} else if (top > getInner().height - _this.offsetHeight) {
top = getInner().height - _this.offsetHeight;
}
_this.style.left = left + ‘px‘;
_this.style.top = top + ‘px‘;
};
document.onmouseup=function()
{
if(_this.releaseCapture)//iE鼠标拖拽出了目标节点的时候不能再获取到事件
{
_this.releaseCapture();
}
this.onmousemove=null;
this.onmouseup=null;
}
}
}
return this;
};
//跨浏览器添加事件绑定
function addEvent(obj, type, fn) {
if (typeof obj.addEventListener != ‘undefined‘) {
obj.addEventListener(type, fn, false);
} else {
//创建一个存放事件的哈希表(散列表)
if (!obj.events) obj.events = {};
//第一次执行时执行
if (!obj.events[type]) {
//创建一个存放事件处理函数的数组
obj.events[type] = [];
//把第一次的事件处理函数先储存到第一个位置上
if (obj[‘on‘ + type]) obj.events[type][0] = fn;
}
//从第二次开始我们用事件计数器来存储
obj.events[type][addEvent.ID++] = fn;
//执行事件处理函数
obj[‘on‘ + type] = function () {
for (var i in obj.events[type]) {
obj.events[type][i](); //顺序执行已经解决
}
};
}
}
//为每个事件分配一个计数器
addEvent.ID = 1;
//跨浏览器移出事件
function removeEvent(obj,type,fn)
{
if(typeof obj.removeEventListener!="undefined")
{
obj.removeEventListener(type,fn,false);
}
else
{
alert(obj.events);
}
}
//demo.js
window.onload = function () {
var oButton = document.getElementById(‘button‘);
addEvent(oButton, ‘click‘, fn1);
addEvent(oButton, ‘click‘, fn2);
addEvent(oButton, ‘click‘, fn3);
};
function fn1(e) {
alert(‘1‘);
}
function fn2(e) {
alert(‘2‘);
}
function fn3(e) {
alert(‘3‘);
}
function fn1(e) {
alert(‘1‘);
}
function fn2(e) {
alert(‘2‘);
}
function fn3(e) {
alert(‘3‘);
}
100 事件 [IE8] 用数组来保存传统事件 通过数组来实现按顺序执行
标签：
原文地址：http://blog.csdn.net/xiaomogg/article/details/45488975
