JS-DOM2级封装练习题--点击登录弹出登录对话框

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
<meta name="author" content="gjf-702004176@qq.com" />
		<title>Document-DOM2级封装练习题</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-color: red;
				position: absolute;
				right: 4px;
				top: 6px;
			}
		</style>
		<script>
			window.onload = function() {
				var login_btn = document.getElementById('login'),
					login_box = document.getElementById('login_box'),
					close = document.getElementById('close');
 // 封装添加事件监听程序,封装到一个函数addEvent中,接受三个参数:要执行的对象(就是获取的id变量名)、事件类型(click。mouseover等)、执行的函数(这里表示调用显示函数/隐藏函数)
				function addEvent(ele, type, hander) {
					if(ele.addEventListener) {//如果浏览器支持addEventListener方法,(适配于除ie8及以下浏览器之外的浏览器)
						ele.addEventListener(type, hander, false);//就使用这个方法,true表示事件捕获,false表示事件冒泡
					} else if(ele.attachEvent) {//如果是ie8及以下的浏览器,
						ele.attachEvent('on' + type, hander);//就用这个方法,因为传进来的type事件都不必要添加‘on’,但是ie少不了on,就在type前加上‘on’,不用加false或ture,因为ie只支持冒泡,默认是false也只有false
					} else {
						ele['on' + type] = hander;//不支持dom2级操作的话,就调用dom0级的样式,就比如obj.onclick = function(){}一样,ele=obj,onclick='on'+type,hander=function(){};值得注意的是,1:需要加'on',因为传过来type时不用加on但是dom0级调用事件是要有on的。2:[]的处理方式,而不是'.',因为变量不能调用字符串的方法,其实ele.onclick === ele['onclick'],这两个写法完全相等。所以不能使用'.'的情况下,用['']的方法。
					}
				}
				// 显示登录层函数
				function showLogin() {//普通的通过js操作css样式的代码,只不过定义成了一个函数封装起来一会方便调用。
					// 执行代码
					login_box.style.display = "block";
				}
				// 隐藏登录层函数
				function hideLogin() {
					// 执行代码
					login_box.style.display = "none";
				}
				//点击登录按钮显示登录层 
				// 执行代码
				addEvent(login_btn,'click', showLogin);//调用函数,传三个参数,分别是要承载、执行事件的按钮id变量名,事件名称-不加on,触发这个事件后会调用或执行的函数(名)
				//点击关闭按钮隐藏登录层
				// 执行代码
				addEvent(close,'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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏柠檬先生

vue2.0 配置 选项 属性 方法 事件 ——速查

全局配置               silent        设置日志与警告     optionMergeStrategies         合并策...

2019
来自专栏贺贺的前端工程师之路

Angular2 之 属性型指令Angular指令可分为三种创建一个属性型指令 -- 初级应用响应用户引发的事件 -- 高级应用

绑定宿主元素的事件,事件绑定的时候捕捉到这个事件源$event(table指令,这是属性型指令的重点)。

963
来自专栏逸鹏说道

01.Web大前端时代之:HTML5+CSS3入门系列~初识HTML5

Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 文档申明 <!-...

3004
来自专栏iKcamp

React 深入系列3:Props 和 State

文:徐超,《React进阶之路》作者 授权发布,转载请注明作者及出处 ---- React 深入系列3:Props 和 State React 深...

3986
来自专栏破晓之歌

vue2.5入门(推荐,差代码) 原

1012
来自专栏极客生活

数据分析Excel技能之自动填充

将光标移动到选中的单元格的右下角的那个节点上光标会变成实心加号。然后可以上下左右拖动光标就会自动填充当前单元格中的内容。 根据当前单元格中的内容格式不同,ex...

1093
来自专栏Coco的专栏

CSS 样式书写规范

1927
来自专栏Google Dart

AngularDart 4.0 高级-结构指令 顶

本指南介绍Angular如何用结构指令操纵DOM,以及如何编写自己的结构指令来完成相同的操作。

1392
来自专栏搞前端的李蚊子

Vue中的$set的使用

在我们使用vue进行开发的过程中,可能会遇到一种情况:当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去; 当我们去看vue文档的时候,会发...

42310
来自专栏开源项目

Vue 2.0 学习总结,精华全在这里了

摘要:年后公司项目开始上vue2.0,自己对学习进行了总结,希望对大家有帮助! 1Vue 介绍 Vue 是什么? https://vuefe.cn/guide ...

31511

扫码关注云+社区

领取腾讯云代金券