//base.js
var $=function (_this)//Call to pass this here
{
return new Base (_this);
};
Object type
function Base (_this)
{
Create an array to get the array of nodes and nodes
this.elements=[];//privatization, not shared
if (_this!=undefined)//_this is an object here, undefined is also an object, but do not typeof put back the "undefined" with single quotes
{
This.elements[0]=_this; Put this to the first of the array
}
}
Get ID Node
Base.prototype.getid=function (ID)
{
This.elements.push (document.getElementById (id));
return this;
};
Get element node
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 acquisition
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;
};
Get a node
Base.prototype.eq=function (num)
{
var element=this.elements[num];
this.elements=[];//emptying an array
this.elements[0]=element;//re-assigning values
return this;
};
Set 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);//Why do I need to return here?
}
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;
};
Set innerHTML get 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;
};
Add Class
Base.prototype.addclass=function (ClassName)
{
for (Var i=0;i<this.elements.length;i++)
{
if (!hasclass (this.elements[i],classname))//Determine if you already have this class
{
this.elements[i].classname+= ' +classname;
}
}
return this;
};
Move out of class
Base.prototype.removeclass=function (ClassName)//Call Method $ (). GetClass ("DD"). AddClass ("a"). AddClass ("B"). Removeclass ("B");
{
for (Var i=0;i<this.elements.length;i++)
{
if (Hasclass (this.elements[i],classname))//Determine if you already have this class
{
This.elements[i].classname=this.elements[i].classname.replace (New RegExp (' (\\s|^) ' +classname+ ' (\\s|$) ');
}
}
return this;
};
Add a link or style CSS rule, not commonly used
Base.prototype.addrule=function (num,selectortext,csstext,position)//Call method, $ (). 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",)
}
};
Remove a link or style CSS rule, not commonly used
Base.prototype.addrule=function (Num,index)//Call method, $ (). 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",)
}
};
Set the hover method
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;
};
Add Show
Base.prototype.show=function ()
{
for (Var i=0;i<this.elements.length;i++)
{
this.elements[i].style.display= "Block"
}
return this;
};
Add Hide
Base.prototype.hide=function ()
{
for (Var i=0;i<this.elements.length;i++)
{
This.elements[i].style.display= "None"
}
return this;
};
Set the center of the object
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;
};
triggering browser window events
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;
};
Lock Screen function
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);//block default events
var _this=this;
var diffx= e.clientx-_this.offsetleft;
var diffy= e.clienty-_this.offsettop;
if (_this.setcapture)//ie the mouse is dragged out of the target node, you can no longer get the event
{
_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 the mouse is dragged out of the target node, you can no longer get the event
{
_this.releasecapture ();
}
This.onmousemove=null;
This.onmouseup=null;
}
}
}
return this;
};
//cross-browser add event bindings
function addevent (obj, type, fn) {
if (typeof obj.addeventlistener! = ' undefined ') {
Obj.addeventlistener (Type, FN, false);
} else {
//Create a hash table that holds events (hash table)
if (!obj.events) obj.events = {};
//execution at first execution
if (!obj.events[type]) {
//Create an array that holds the event handler function
Obj.events[type] = [];
//The first event handler is first stored in the first position
if (obj[' on ' + type]) obj.events[type][0] = fn;
}
Else
{
if (addevent.equal (OBJ.EVENTS[TYPE],FN)) return false;//returns False if the same event is registered with the same function
}
//From the second start we use event counters to store
obj.events[type][addevent.id++] = fn;
//Execute event handler function
obj[' on ' + type] =addevent.exec;
}
}
//Assign a counter to each event
addevent.id = 1;
//Execute event handler function
addevent.exec=function (Event)
{
var e=window.event;//ie No need for group compatibility
var es=this.events[e.type];
For (var i in es) {
Es[i].call (this,e);//Pass this and E in so that you can get to This.value and E.clientx.
}
};
//block with the same registration function
addevent.equal = function (es, fn) {
For (var i in es) {
if (es[i] = = fn) return true;
}
return false;
}
//cross-browser move out event
function Removeevent (OBJ,TYPE,FN)
{
if (typeof obj.removeeventlistener!= "undefined")
{
Obj.removeeventlistener (type,fn,false);
}
Else
{
For (var i in Obj.events[type])//addevent has added events to obj .
{
if (OBJ.EVENTS[TYPE][I]==FN)
{
Delete Obj.events[type][i];
}
}
}
}
Demo.js
Window.onload = function () {
var obutton = document.getElementById (' button ');
Addevent (Obutton, ' click ', fn1);
Addevent (Obutton, ' click ', fn2);
Addevent (Obutton, ' click ', Fn3);
Removeevent (Obutton, ' click ', fn1);
};
function Fn1 (e) {
Alert (' 1 ' +this.value+ e.clientx);
}
function Fn2 (e) {
Alert (' 2 ' +this.value+ e.clientx);
}
function Fn3 (e) {
Alert (' 3 ' +this.value+ e.clientx);
}
Demo.html
<! DOCTYPE html>
<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>
<body>
<input type= "button" value= "Pushbutton" id= "buttons"/>
</body>
100 event [~IE8] Delete event and the same registration function is masked