问答详情
源自：3-3 编程练习

为什么JS必须全部写在window.onload中，页面才能实现？

<!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');

             

       // 封装添加事件监听程序

        var eventUtil = {

          addHandler:function(ele,type,hander) {

           // 执行代码  

           if (ele.addEventListener) {

               ele.addEventListener(type,hander,false);

           }

           else if (ele.attachEvent) {

             ele.attachEvent("on"+type,hander);    

           }

           else {

               ele["on"+type] = hander;

           }

       }

        }

     

  

        // 显示登录层函数

       function showLogin() {

       // 执行代码

              login_box.style.display = "block";

        }

        // 隐藏登录层函数

         function hideLogin() {

          // 执行代码

          login_box.style.display = "none";

        }

     

        //点击登录按钮显示登录层 

        // 执行代码

        eventUtil.addHandler(login_btn,"click",showLogin);

        eventUtil.addHandler(close,"click",hideLogin);

        //点击关闭按钮隐藏登录层

        // 执行代码

       }

</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>


望大神指点，谢谢！！

提问者：自律让人自由4008941 2016-11-20 01:05

个回答

  • 青湛
    2016-11-24 22:23:50
    已采纳

    好好学学加载机制呀....window.onload的意思是等页面完全加载完毕的意思，如果你不写这句的话，你的页面DOM节点还没有加载上，你的js就已经在运行了，可能就找不到节点，还有现在一般都不用window.onload这个方法，你可以查一查。

    0
  • EasonWong
    2016-11-25 09:34:33

    如果不用onload的话，需要吧script从div之前移动到div之后，也就是先把html画出来在取html的元素，不然就会出现问题。我的代码供参考：

    <!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');
    // 封装添加事件监听程序
    var myFunc={
        addEvent:function(e,type,handler){
           // 执行代码  
           if(e.addEventListener){
                e.addEventListener(type,handler,false);
            //判断IE事件
            }else if(e.attachEvent){
                e.attachEvent("on"+type,handler);
            //如果都不支持则使用DOM0级
            }else{
                //[]完全等价于'.'，只能用[]
                e["on"+type]=handler;
            }
        },
        // 显示登录层函数
        showLogin:function(){
            // 执行代码
            login_box.style.display = "block";
        },
        // 隐藏登录层函数
        hideLogin:function(){
          // 执行代码
            login_box.style.display = "none";
        }
        //点击登录按钮显示登录层 
        // // 执行代码
        // addEvent(login_btn,"click",showLogin);
        // //点击关闭按钮隐藏登录层
        // // 执行代码
        // addEvent(close,"click",hideLogin);
        }

    myFunc.addEvent(login_btn,"click",myFunc.showLogin);
        //点击关闭按钮隐藏登录层
        // 执行代码
    myFunc.addEvent(close,"click",myFunc.hideLogin);
    </script>
</body>
</html>


    0
  • WANG655554158315
    2016-11-20 08:34:38

    谁说的必须要写window.onload.这样写只是方便加载页面的时候就会执行，你还有给按钮添加点击事件等方法啊

    0