为了账号安全，请及时绑定邮箱和手机立即绑定

课程

/前端开发

/JavaScript

/DOM事件探秘

为什么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

源自：DOM事件探秘  3-3

关注问题 我要回答
5149
操作
收起

正在回答

3 回答

青湛 回答被采纳 +3 积分
2016-11-24

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

0 回复 有任何疑惑可以回复我~
收起回答
#1

自律让人自由4008941 提问者

非常感谢！
2016-11-25 回复 有任何疑惑可以回复我~
EasonWong
2016-11-25

如果不用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 回复 有任何疑惑可以回复我~
收起回答
#1

EasonWong

<script type="text/javascript" src="JS/evenUtil.js"></script> 这句是我测试导入之前课上的方法，但实际没有用到。可以去掉
2016-11-25 回复 有任何疑惑可以回复我~
#2

自律让人自由4008941 提问者

谢谢~已经明白了~刚学2个星期JavaScript 好多都不懂
2016-11-25 回复 有任何疑惑可以回复我~
WANG655554158315
2016-11-20

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

0 回复 有任何疑惑可以回复我~
收起回答
#1

自律让人自由4008941 提问者

这种方式写得话，我如果不全部写在window.onload里就报错eventUtil无效
2016-11-20 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
DOM事件探秘
  • 参与学习       99544    人
  • 解答问题       1197    个

DOM事件？本课程会通过实例来给小伙伴们讲解如何使用这些事件

进入课程

本课相似问答

2 回答为什么不把script.js中的代码和event.js的代码写到一块？var声明必须写到window.onload中吗？

4 回答JS写在外部文件中不出现效果

4 回答为什么要把对addEvent函数的调用写在window.onload=function(){}里面

1 回答为什么js要放在 文档内容后面才生效？

4 回答在鼠标遍历的时候为什么必须用this？
搜索更多本课相关问答

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

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信