為什么JS必須全部寫在window.onload中，頁面才能實(shí)現(xiàn)？
<!doctype html>
<html>
<head>
? <meta charset="UTF-8">
? ? <title>Document</title>
<style>
*{margin:0;padding:0;}
? ? ?.head{font-size:12px;padding:6px 0 0 10px;}
? ? ?#login_box{width:300px;height:150px;background:#eee;
? ? ?border:1px solid #ccc;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;display:none;}
? ? ?#login_box p{height:20px;border-bottom:1px solid #ccc;font-size:12px;padding:6px 0 0 5px;font-weight:bold;}
? ? ?#close{width:14px;height:14px;position:absolute;right:4px;top:6px;cursor:pointer;}
</style>
<script>
? ? ? window.onload = function(){
? ? ? ?var login_btn=document.getElementById('login'),
? ? ? ? ? ?login_box=document.getElementById('login_box'),
? ? ? ? ? ?close=document.getElementById('close');
? ? ? ? ? ? ?
? ? ? ?// 封裝添加事件監(jiān)聽程序
? ? ? ? var eventUtil = {
? ? ? ? ? addHandler:function(ele,type,hander) {
? ? ? ? ? ?// 執(zhí)行代碼 ?
? ? ? ? ? ?if (ele.addEventListener) {
? ? ? ? ? ? ? ?ele.addEventListener(type,hander,false);
? ? ? ? ? ?}
? ? ? ? ? ?else if (ele.attachEvent) {
? ? ? ? ? ? ?ele.attachEvent("on"+type,hander); ? ?
? ? ? ? ? ?}
? ? ? ? ? ?else {
? ? ? ? ? ? ? ?ele["on"+type] = hander;
? ? ? ? ? ?}
? ? ? ?}
? ? ? ? }
? ? ?
??
? ? ? ? // 顯示登錄層函數(shù)
? ? ? ?function showLogin() {
? ? ? ?// 執(zhí)行代碼
? ? ? ? ? ? ? login_box.style.display = "block";
? ? ? ? }
? ? ? ? // 隱藏登錄層函數(shù)
? ? ? ? ?function hideLogin() {
? ? ? ? ? // 執(zhí)行代碼
? ? ? ? ? login_box.style.display = "none";
? ? ? ? }
? ? ?
? ? ? ? //點(diǎn)擊登錄按鈕顯示登錄層?
? ? ? ? // 執(zhí)行代碼
? ? ? ? eventUtil.addHandler(login_btn,"click",showLogin);
? ? ? ? eventUtil.addHandler(close,"click",hideLogin);
? ? ? ? //點(diǎn)擊關(guān)閉按鈕隱藏登錄層
? ? ? ? // 執(zhí)行代碼
? ? ? ?}
</script>
</head>
<body>
<div>親，您好！<input type="button" value="登 錄" id="login"></div>
<div id="login_box">
<p>用戶登錄</p><span id="close">X</span>
? ? ? ? <div style="display:table;margin:20px ;">
? ? ? ? <div style="display:table-row">
? ? ? ? <span style="display:table-cell;text-align:right;vertical-align:middle;">用戶名：</span><span style="display:table-cell;"><input type="text" placeholder="請輸入用戶名" style="height:50px;"></span>
? ? ? ? </div>
? ? ? ? <div style="display:table-row">
? ? ? ? <span style="display:table-cell;text-align:right;vertical-align:middle;">密碼：</span><span style="display:table-cell"><input type="text" placeholder="請輸入密碼"></span>
? ? ? ? </div>
? ? ? ? </div>
</div>
</body>
</html>
望大神指點(diǎn)，謝謝?。?/p>
2016-11-24
好好學(xué)學(xué)加載機(jī)制呀....window.onload的意思是等頁面完全加載完畢的意思，如果你不寫這句的話，你的頁面DOM節(jié)點(diǎn)還沒有加載上，你的js就已經(jīng)在運(yùn)行了，可能就找不到節(jié)點(diǎn)，還有現(xiàn)在一般都不用window.onload這個方法，你可以查一查。
2016-11-25
如果不用onload的話，需要吧script從div之前移動到div之后，也就是先把html畫出來在取html的元素，不然就會出現(xiàn)問題。我的代碼供參考：
<!doctype?html> <html> <head> ????<meta?charset="UTF-8"> ????<title>Document</title> ????<style> ?????*{margin:0;padding:0;} ?????.head{font-size:12px;padding:6px?0?0?10px;} ?????#login_box{width:300px;height:150px;background:#eee; ?????border:1px?solid?#ccc;position:absolute;left:50%;top:50%;margin-left:-150px;margin-top:-75px;display:none;} ?????#login_box?p{height:20px;border-bottom:1px?solid?#ccc;font-size:12px;padding:6px?0?0?5px;font-weight:bold;} ?????#close{width:14px;height:14px;background:url(close.png)?no-repeat;position:absolute;right:4px;top:6px;} ????</style> ????<script?type="text/javascript"?src="JS/evenUtil.js"></script> ??? </head> <body> ????<div?class="head">親，您好！<input?type="button"?value="登?錄"?id="login"></div> ????<div?id="login_box"> ????????<p>用戶登錄</p><span?id="close"></span> ????</div> ?<script> ????var?login_btn=document.getElementById('login'), ????????login_box=document.getElementById('login_box'), ????????close=document.getElementById('close'); ????//?封裝添加事件監(jiān)聽程序 ????var?myFunc={ ????????addEvent:function(e,type,handler){ ???????????//?執(zhí)行代碼?? ???????????if(e.addEventListener){ ????????????????e.addEventListener(type,handler,false); ????????????//判斷IE事件 ????????????}else?if(e.attachEvent){ ????????????????e.attachEvent("on"+type,handler); ????????????//如果都不支持則使用DOM0級 ????????????}else{ ????????????????//[]完全等價于'.'，只能用[] ????????????????e["on"+type]=handler; ????????????} ????????}, ????????//?顯示登錄層函數(shù) ????????showLogin:function(){ ????????????//?執(zhí)行代碼 ????????????login_box.style.display?=?"block"; ????????}, ????????//?隱藏登錄層函數(shù) ????????hideLogin:function(){ ??????????//?執(zhí)行代碼 ????????????login_box.style.display?=?"none"; ????????} ????????//點(diǎn)擊登錄按鈕顯示登錄層? ????????//?//?執(zhí)行代碼 ????????//?addEvent(login_btn,"click",showLogin); ????????//?//點(diǎn)擊關(guān)閉按鈕隱藏登錄層 ????????//?//?執(zhí)行代碼 ????????//?addEvent(close,"click",hideLogin); ????????} ????myFunc.addEvent(login_btn,"click",myFunc.showLogin); ????????//點(diǎn)擊關(guān)閉按鈕隱藏登錄層 ????????//?執(zhí)行代碼 ????myFunc.addEvent(close,"click",myFunc.hideLogin); ????</script> </body> </html>2016-11-20
誰說的必須要寫window.onload.這樣寫只是方便加載頁面的時候就會執(zhí)行，你還有給按鈕添加點(diǎn)擊事件等方法啊