慕粉3210555
2018-06-06 23:07
<!doctype html>
<html lang="en">
<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>
window.onload=function() {
var login_btn = document.getElementById('login');
var login_box1= document.getElementById('login_box');
var close1 = document.getElementById('close');
// 封装添加事件监听程序
function addEvent(ele, type, hander) {
if (ele.addEventListener) {
//谷歌
ele.addEventListener(type, hander, false);
} else if (ele.attachEvent) {
ele.attachEvent('on' + type, handler);
} else {
ele['on' + type] = handler;
}
}
// 显示登录层函数
function showLogin() {
// 执行代码
login_box1.style.display = 'block'
}
// 隐藏登录层函数
function hideLogin() {
// 执行代码
login_box1.style.display = 'none';
}
//点击登录按钮显示登录层
// 执行代码
addEvent(login_box1, 'click', showLogin());
//点击关闭按钮隐藏登录层
// 执行代码
addEvent(close1, 'click', hideLogin());
}
</script>
</head>
<body>
<div class="head">亲,您好!<input type="button" value="登 录" id="login"></div>
<div id="login_box">
<p>用户登录</p><span id="close"></span>
</div>
</body>
</html>初始化的时候问什么就会执行addEvent这两个呢
ele['on' + type] = handler;
感觉是这里写错了,把handler写在前面,应该可以了吧
addEvent(ele, type, hander)这个函数用错了。这里hander指的是传入一个函数名,也就是不要带圆括号,这里不是调用函数。
addEvent(login_box1, 'click', showLogin());
中showLogin()的括号去掉试一下?是不是就不执行了?
DOM事件探秘
99527 学习 · 1305 问题
相似问题