【第八章】事件----事件分类

事件分类

8.3.1页面事件

在项目开发中，经常需要JavaScript对网页中的DOM元素进行操作，而页面的加载又是按照代码的编写顺序，从上到下进行的。
因此，若在页面还未加载完成的情况下，就使用JavaScript操作DOM元素，会出现语法错误，代码如下。

<script>
			document.getElementById('demo').onclick = function(){
				console.log('单击');
			}
		</script>
		<div id="demo"></div>

在控制台出现错误提示，原因是界面在加载的过程中，没有获取到相应的元素对象。

load事件用于boby内所以标签都加载完成后才触发，又因其无需考虑页面加载顺序的问题，常常在开发具体功能时添加。
unload事件 用于页面关闭时触发，开发中经常用于清除引用。

事件名称	事件触发时机
load	当页面加载入完毕后触发
unload	当页面关闭时触发

8.3.2焦点事件

事件名称	事件触发时机
focus	当获得焦点是触发（不会冒泡）
blur	当失去焦点是触发（不会冒泡）

demo用户登录的表单

//编写HTML代码
<div id="tips"></div>
//用于显示错误提示信息，默认情况下隐藏，只有当文本框失去焦点，并且未填写任何内容时显示。
		<div class="box">
			<label>用户名：<input id="user" type="text" class="user"></label>
		   <label>密码：<input id="pass" type="password" class="pass"></label> 
		   <button id="login">登录</button>
		</div>

<script>
			window.onload = function(){
				addBlur($('user'));
				//检测id为user的元素失去焦点后，value值是否为空
				addBlur($('pass'));	
				//检测id为pass的元素失去焦点后，value值是否为空
			};
			function $(obj){
			//根据id获取指定元素
				return document.getElementById(obj);
				}
			function  addBlur(obj){
			//为指定元素添加失去焦点事件
					obj.onblur = function(){
						isEmpty(this);
					};
				}
			function isEmpty(obj){
			//检测表单是否为空
				if(obj.value ===''){
					$('tips').style.display='block';
					$('tips').innerHTML ='注意，输入的内容不能为空';
				}else{
					$('tips').style.display ='none';
				}
			}	
		</script>