                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /DOM事件探秘

正确代码来了！好多小伙伴没有写关闭这的代码

<!doctype html>

<html>

<head>

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

window.onload=function(){

var login_btn=document.getElementById('login'),

login_box=document.getElementById('login_box'),

close=document.getElementById('close');

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

function addEvent(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";

}

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

addEvent(login_btn,'click',showLogin);

// 执行代码

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

addEvent(login_box,'click',hideLogin);

// 执行代码

}

</script>

</head>

<body>

</div>

</body>

</html>

qq圐圙2

2018-11-24

源自：DOM事件探秘 3-3

关注问题我要回答

956

操作

收起

1 回答

慕运维7428119
2019-05-31

// 封装添加事件监听程序
        function addEvent(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';
        }