windows.onload-学通JavaScript

1.window.onload方法

window.onload方法用于定义HTML中的onload方法:

window.onload=function()

{

var a = document.getElementById("loadng");

a.parentNode.removeChild(a);

}

这样就可以代替<body>标签的onload方法,如果<body>标签原来定义了onload方法,则可以通过以下方法追加避免冲突。

if(window.onload=null)

{

window.onload=function(){dvwaitl.style.display = "none"; }

}

else

{

eval("wtempfunction="+window.onload.toString());

window.onload=function() {wtempfunction();dvwaitl.style.dispay="none";}

}

这段代码要放在<body>标签前面,否则放在其后就没有作用了。JavaScript的window.onload事件,只在第一次加载的时候执行,之后刷新是没有作用的。

2.document.getElementById()方法

在window.onload事件的使用中,我们常常看到document.getElementById()方法,该方法常用于获取元素,其最初定义为HTML DOM接口成员,之后在2级DOM中移入XML DOM接口。document.getElementById属于host对象,是一个方法。一般用法是:

var x = document.getElementById('li');

3.document.getElementsByTagName()方法

在window.onload事件的使用中,常常使用document.getElementsByTagName()方法,传回指定名称的元素集合,其用法与document.getElementById类似。

var = y document.getElementsByTagName("input");

4.object.setCapture()是区域外事件捕捉方法

object.setCapture()方法不支持键盘事件,只能捕获onmousedown、onmouseup、onmousemove、onclick、ondblclick、onmouseover和onmouseout鼠标事件。

object.setCapture()方法是一个object被setCapture后,它的方法将会被继承到整个文档进行捕获。当不需要把方法继承到整个文档捕获时,要用object.releaseCapture()方法来释放。类似的还有window.captureEvents(Event.eventType)和window.releaseEvents(Event,eventType)方法。

类似的还有window.captureEvents(Event.eventType)和window.releaseEvents(Event.eventType)方法。

windows.onload源码

<!--index.html-->

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>window.onload方法</title>

<style type="text/css">

* { padding: 0; margin: 0; }

body { background: #42509a; }

ul { width: 800px; height: 500px; border: 1px solid #333; background: #05090e; overflow: hidden; position: relative; margin: 50px auto 0; }

li { position: absolute; list-style: none; }

#pic1 { top: 210px; left: 550px; width: 216px; height: 432px; background: url(images/1.png) no-repeat; }

#pic2 { top: 290px; left: 430px; width: 229px; height: 297px; background: url(images/2.png) no-repeat; }

#pic3 { top: 215px; left: 220px; width: 325px; height: 426px; background: url(images/3.png) no-repeat; }

#pic4 { top: 210px; left: 80px; width: 272px; height: 443px; background: url(images/4.png) no-repeat; }

#pic5 { top: -40px; left: -50px; width: 1422px; height: 1000px; background: url(images/bg.png) no-repeat; }

</style>

<script type="text/javascript" src="prefectDrag.js"></script>

<script type="text/javascript" src="main.js"></script>

</head>

<body>

<ul id="ul_container">

<li id="pic1" style="z-index: 3;"><img src="images/1.png" alt="" /></li>

<li id="pic2" style="z-index: 4;"><img src="images/2.png" alt="" /></li>

<li id="pic3" style="z-index: 5;"><img src="images/3.png" alt="" /></li>

<li id="pic4" style="z-index: 4;"><img src="images/4.png" alt="" /></li>

<li id="pic5" style="z-index: 1;"></li>

</ul>

</body>

</html>

windows.onload源码

/*main.js*/

window.onload=function ()

{

var oUl=document.getElementById('ul_container');

var aLi=oUl.getElementsByTagName('li');

var aLiPosition=[];

var i=0;

var oLastPostion={x:0, y:0};

for(i=0;i<aLi.length;i++)

{

aLiPosition[i]={x: aLi[i].offsetLeft, y: aLi[i].offsetTop};

}

new MiaovPerfectDrag

(

document.body,

function ()

{

return oLastPostion;

}

,

function (x, y)

{

oLastPostion.x=x;

oLastPostion.y=y;

for(i=0;i<aLi.length;i++)

{

aLi[i].style.left=aLiPosition[i].x+x*parseInt(aLi[i].style.zIndex)*0.1+'px';

aLi[i].style.top=aLiPosition[i].y+y*parseInt(aLi[i].style.zIndex)*0.1+'px';

}

},null

);

};

windows.onload源码

/*prefectDrag.js*/

function MiaovperfectDragSimple(vElement, fnOnDragStart, fnOnDraging, fnOnDragEnd)

{

var oElementDrag=null;

if(typeof vElement == 'string')

{

oElementDrag=document.getElementById(vElement);

}

else if(typeof vElement == 'object')

{

oElementDrag=vElement;

}

this.creator=MiaovPerfectDrag;

this.creator

(

oElementDrag,

function ()

{

return {x: oElementDrag.offsetLeft, y: oElementDrag.offsetTop};

},

function (x, y)

{

oElementDrag.style.left=x+'px';

oElementDrag.style.top=y+'px';

if(fnOnDraging)

{

fnOnDraging(x, y);

}

},

fnOnDragStart, fnOnDragEnd

);

delete this.creator;

}

MiaovperfectDragSimple.prototype=MiaovPerfectDrag.prototype;

function MiaovPerfectDrag(oElementDrag, fnGetPos, fnDoMove, fnOnDragStart, fnOnDragEnd)

{

var obj=this;

this.oElement=oElementDrag;

this.oElement.style.overflow='hidden';

this.fnGetPos=fnGetPos;

this.fnDoMove=fnDoMove;

this.fnOnDragStart=fnOnDragStart;

this.fnOnDragEnd=fnOnDragEnd;

this.__oStartOffset__={x:0, y:0};

this.oElement.onmousedown=function (ev)

{

obj.startDrag(window.event || ev);

};

this.fnOnMouseUp=function (ev)

{

obj.stopDrag(window.event || ev);

};

this.fnOnMouseMove=function (ev)

{

obj.doDrag(window.event || ev);

};

}

MiaovPerfectDrag.prototype.enable=function ()

{

var obj=this;

this.oElement.onmousedown=function (ev)

{

obj.startDrag(window.event || ev);

};

};

MiaovPerfectDrag.prototype.disable=function ()

{

this.oElement.onmousedown=null;

};

MiaovPerfectDrag.prototype.startDrag=function (oEvent)

{

var oPos=this.fnGetPos();

var x=oEvent.clientX;

var y=oEvent.clientY;

if(this.fnOnDragStart)

{

this.fnOnDragStart();

}

this.__oStartOffset__.x=x-oPos.x;

this.__oStartOffset__.y=y-oPos.y;

if(this.oElement.setCapture)

{

this.oElement.setCapture();

this.oElement.onmouseup=this.fnOnMouseUp;

this.oElement.onmousemove=this.fnOnMouseMove;

}

else

{

document.addEventListener("mouseup", this.fnOnMouseUp, true);

document.addEventListener("mousemove", this.fnOnMouseMove, true);

window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);

}

};

MiaovPerfectDrag.prototype.stopDrag=function (oEvent)

{

if(this.oElement.releaseCapture)

{

this.oElement.releaseCapture();

this.oElement.onmouseup=null;

this.oElement.onmousemove=null;

}

else

{

document.removeEventListener("mouseup", this.fnOnMouseUp, true);

document.removeEventListener("mousemove", this.fnOnMouseMove, true);

window.releaseEvents(Event.MOUSE_MOVE | Event.MOUSE_UP);

}

if(this.fnOnDragEnd)

{

if(oEvent.clientX==this.__oStartOffset__.x && oEvent.clientY==this.__oStartOffset__.y)

{

this.fnOnDragEnd(false);

}

else

{

this.fnOnDragEnd(true);

}

}

};

MiaovPerfectDrag.prototype.doDrag=function (oEvent)

{

var x=oEvent.clientX;

var y=oEvent.clientY;

this.fnDoMove(x-this.__oStartOffset__.x, y-this.__oStartOffset__.y);

};

windows.onload源码图片

离开标题栏