JS事件行为

最新推荐文章于 2023-09-01 15:52:18 发布

老王笔记

最新推荐文章于 2023-09-01 15:52:18 发布

阅读量582

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/JSWANGCHANG/article/details/102655889

版权

JS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1，什么是事件
   通常是由用户行为来激发的操作
2，触发事件的行为
   所有的事件在绑定的时候，前面要加on
   1, 鼠标的事件
       click: 鼠标单击事件
       mouseover: 鼠标移入进元素的时候激发的事件；
       mouseout: 鼠标移除元素时激发的事件
       mousemove: 鼠标在元素内移动的事件
   2，键盘事件
       keydown：键位按下时的事件
       keypress: 键位按下时的事件
       keyup：键位抬起时的事件
   3，状态改变事件
       load：当元素加载完成时激发的事件
       change：元素发生改变时激发的事件(select)
       focus: 元素获取焦点时触发的事件
       blur: 元素失去焦点时的事件
       submit: 表单被提交时触发的事件
3，绑定事件的方式
   1，在元素中绑定事件
       语法：
           <标记 on事件名="function()">
       eg:
           <div οnmοuseοver="fun()"></div>
           <body οnlοad="fun()"></body>
   2, 在JS中动态为元素绑定事件
       var div = document.getElementById('id');
       div.on事件 = function{
           事件操作
       }
       注意：在动态绑定事件中，事件处理函数内，允许通过this关键字来表示当前元素（DOM元素）
4，事件行为
   1，load事件
       常用：为body绑定Load事件，目的是为了在所有内容都加载完毕后再执行的操作放在此处
       1， <body οnlοad="fun()"></body>
       2, JS中动态绑定
           window.onload = functgion(){
               xxx;
           }
   2, submit 事件
       只有在表单被提交时才会触发
       该事件可以阻止表单提交
       注意：该事件需要一个boolean的返回值来通知表单是否要提交，返回true时可以提交表单；
       返回false则阻止表单提交；

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
	#d1,#d2{
		width:200px;
		height:200px;
		border: 1px solid #000;
		background:pink;
	}
  </style>
 </head>
 <body>
	<div id="d1">llj，are u ok?</div>
	<div id='d2'> d2 </div>
	<form action="/llj/" id='frm'>
		<p>
			<input type="text"  id='uname' name='uname'  placeholder='username'>
			<span id='alarmUname'></span>
		</p>
		<p>
			<input type="text" id='pass' name='upass' placeholder='password:8-18 length'>
			<span id='alarmPass'></span>
		</p>

		<input type="submit" id='btnSub'  value='提交'>
	</form>
	<script>
		//鼠标事件
		window.onload = function(){
			var ele = document.getElementById('d1');
			ele.onclick = function(){
				console.log('div has been clicked');
			}
			ele.onmouseover = function(){
				console.log('mouse has over div1');				
			}
			ele.onmouseout = function(){
				console.log('mouse has been moved out from div1');
			}
			ele.onmousemove = function(){
				console.log('mouse moving.');
			}
			//创建 元素
			var eleUname = document.getElementById('uname');
			var elePass = document.getElementById('pass');
			var eleAlarmUname = document.getElementById('alarmUname');
			var eleAlarmPass = document.getElementById('alarmPass');
		
			//用户名验证
			eleUname.onfocus = function(){
				console.log('get the focus of username');
				eleAlarmUname.innerText = '请输入6-18位用户名';
			}
			eleUname.onblur = function(){
				console.log('blur the mouse');
				//丢失光标的时候，验证用户名长度是否符合规范，不符合则红色提示，符合绿色提示；
				if (this.value.length < 6 || this.value.length > 18 )
				{
					eleAlarmUname.innerText = '用户名不符合规范';
					eleAlarmUname.style.color = 'red';
				}else{
					eleAlarmUname.innerText = '验证通过 ';		
					eleAlarmUname.style.color = 'green';	
				}
			}
			
			//密码验证
			elePass.onfocus = function(){
				console.log('get focus of pass');
				eleAlarmPass.innerText = '请输入6-18位密码';
			}
			elePass.onblur = function(){
				console.log('blur the mouse');
				if (this.value.length >= 6 && this.value.length <= 18)
				{
					eleAlarmPass.innerText = '验证通过';
					eleAlarmPass.style.color = 'green';
				}else{
					eleAlarmPass.innerText = '密码不符合规范';
					eleAlarmPass.style.color = 'red';
				}
			}
			}
			//提交
			document.getElementById('frm').onsubmit = function(){
				var uLen = document.getElementById('uname').value.length;
				var pLen = document.getElementById('pass').value.length;
				if ( uLen >= 6 && uLen <= 18 &&	pLen >= 6 && pLen <= 18){ 	
					return true;
				}else{
					return false;
				}
			}
	</script>
 </body>
</html>

老王笔记

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS事件行为

1，什么是事件通常是由用户行为来激发的操作2，触发事件的行为所有的事件在绑定的时候，前面要加on 1, 鼠标的事件 click: 鼠标单击事件 mouseover: 鼠标移入进元素的时候激发的事件； mouseout: 鼠标移除元素时激发的事件 mousemove: 鼠标在元素内移动的事件 2...
复制链接

扫一扫