JavaScript学习笔记(第八章—事件)

最新推荐文章于 2022-09-14 15:12:25 发布

王欣欣0328

最新推荐文章于 2022-09-14 15:12:25 发布

阅读量337

点赞数

本文链接：https://blog.csdn.net/qq_45585500/article/details/102530028

版权

事件分类

1、页面事件

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

通常页面的加载是按代码的编写顺序，自上而下依次进行的。
所以在页面还未加载完成情况下，就使用JS操作DOM元素，会出现语法错误，如下图所示：
在这里插入图片描述
load事件用于body内所有标签都加载完成后才触发，又因其无需考虑页面加载顺序问题，常常在开发具体功能时添加；unload事件用于页面关闭时触发，开发时经常用于清除引用，避免内存泄漏。

	window.onload = function() {
		//JS代码
	};

2、焦点事件

焦点事件多用于表单验证功能，例如文本框获取焦点改变文本框的样式，文本框失去焦点时验证文本框内输入的数据。focus事件事件触发时机：当获得焦点时触发(不会冒泡)；blur事件事件触发时机：当失去焦点时触发(不会冒泡)。

<style>
			body{background: #ddd;}
			.box{background: #fff;padding: 20px 30px; width: 400px;margin: 0 auto;text-align: center;}
			.btn{width: 180px;height:40px ;background:#3388ff ;border:1px solid #fff ;color:#fff ;font-size: 14px;}
			.ipt{width: 260px;padding: 4px 2px;}
			.tips{width: 44opx;height: 30px;margin: 5px auto;background: #fff;color: red;border: 1px solid #ccc;
				  display: none;line-height: 30px;padding-left: 20px;font-size: 13px;}
		</style>
	</head>	
	<body>
		<div id="tips"></div>
		<div class="box" id="fox">
			<p><label>用户名：<input id="user" class="ipt" type="text"></label></p><br />
			<p><label>密&nbsp;&nbsp;&nbsp;码：<input id="pass" type="password"></label></p><br />
			<p><button id="login" class="btn">登录</button></p>
		</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>
	</body>

3、鼠标事件

【案例】鼠标拖拽特效

原理分析：根据鼠标的移动位置来计算盒子的移动位置。通过css样式为盒子设置定位，否则即使通过JS代码修改盒子位置(left和top值)也无法完成移动。盒子的位置(left和top值)=鼠标的位置(left和top值)-鼠标按下时与盒子之间的距离以及鼠标移动后的位置，可计算出盒子移动后的位置。

1、html代码和css样式

		<style>
			body{margin:0;}
			.box{width: 400px; height: 300px; border: 5px solid gainsboro;box-shadow: 2px 2px 2px 2px #666;position: absolute;top: 30%;left: 30%;}
			.hd{width: 100%; height: 25px;background-color: #7c9299;border-bottom: 1px solid #369;line-height: 25px;color: #fff; cursor:move ;}
			#box_close{float: right; cursor: pointer;}
		</style>
		
		<div id="box" class="box">
			<div id="drop" class="hd">注册信息（可以拖拽）
				<span id="box_close">【关闭】</span>
			</div>
		</div>

2、处理鼠标按下事件

		<script>
			//获取被拖动的盒子和拖动条
			var box=document.getElementById('box');
			var drop=document.getElementById('drop');
			drop.onmousedown=function(event) {
				var event=event || window.event;
			//获取鼠标按下时的位置
			var pageX=event.pageX || event.clientX+document.documentElement.scrollLeft;
			var pageY=event.pageY || event.clientY+document.documentElement.scrollTop;
			//计算鼠标按下的位置距盒子的位置
			var spaceX=pageX-box.offsetLeft;
			var spaceY=pageY-box.offsetTop;
			};
			</script>

3、处理鼠标移动事件

			
			document.onmousemove=function(event){
				var event=event || window.event;
			//获取移动后鼠标的位置
			var pageX=event.pageX || event.clientX+document.documentElement.scrollLeft;
			var pageY=event.pageY || event.clientY+document.documentElement.scrollTop;
			//计算并设置盒子移动后的位置
			box.style.left=pageX-spaceX+'px';
			box.style.top=pageY-spaceY+'px';
			if (window.getSelection) {
				window.getSelection().removeAllRanges();
			} else{
				document.selection.empty();
			}
			};

4、处理释放鼠标按键的事件

    			document.onmouseup = function(){
				doucument.onmousemove=null;
			};

4、键盘事件

键盘事件是指用户在使用键盘时触发的事件。例如用户按Esc键关闭打开的状态栏，Enter键直接完成光标的上下切换。keypress事件保存的按键值是ASCII码。

		<p>用户姓名：<input type="text"></p>
		<p>电子邮箱：<input type="text"></p>
		<p>手机号码：<input type="text"></p>
		<p>个人描述：<input type="text"></p>
		<script>
			var inputs=document.getElementsByTagName('input');
			for(var i=0;i<inputs.length;i++){
				inputs[i].onkeydown=function(e) {
					//获取事件对象的兼容处理
					var e=event || window.event;
					//判断按下的是不是Enter键,如果是,让下一个input获得焦点
					if(e.keyCode===13){
						//遍历所有input框,找到当前input的下标
						for (var i=0;i<inputs.length;i++) {
							if(inputs[i]===this){
								//计算下一个input元素的下标
								var index=i+1>=inputs.length?0:i+1;
								break;
							}							
						}
						//如果下一个input还是文本框,则获取键盘焦点
						if(inputs[index].type==='text'){
							inputs[index].focus();//触发focus事件
						}
					}					
				};				
			}
		</script>

5、表单事件

表单事件指的是对web表单操作时发生的事件。如表单提交前对表单的验证，表单重置时的确认操作。
submit事件的实现通常要绑定在<form>标签上，在用户单击submit按钮提交表单时触发。reset事件用于单击表单重置按钮时触发，这两个事件的返回值若是false则会取消默认操作，否则将执行默认操作。

		<form id="register" action="index.php" method="post">
			<label>用户名：<input id="user" type="text"></label>
			<input type="submit" value="提交" >
			<input type="reset" value="重置">
		</form>
		<script>
			//获取表单和需要验证的元素对象
			var register=document.getElementById('register');
			var user=document.getElementById('user');
			register.onsubmit=function(event){//为表单添加submit事件
			//获取事件对象,输出当前事件类型
			var event=event || window.event;
			console.log(event.type);
			//判断表单元素是否为空,若为空,则返回false,否则返回true
			return user.value?true:false;				
			};
			register.onreset=function(event) {//为表单添加reset事件
				//获取事件对象,输出当前事件类型
				var event=event || window.event;
				cosole.log(event.type);
				//判断是否确认重置,按'确定'则返回'true',按取消则返回false
				return confirm('请确认是否要重置信息，重置后表单填写的内容将全部清空');
			};
		</script>