JavaWEB笔记10 Javascript中的事件

最新推荐文章于 2022-01-08 21:04:30 发布

RainOnTheMoon

最新推荐文章于 2022-01-08 21:04:30 发布

阅读量153

点赞数

分类专栏：笔记文章标签： js javascript

本文链接：https://blog.csdn.net/weixin_46702804/article/details/119391922

版权

笔记专栏收录该内容

35 篇文章 1 订阅

订阅专栏

JavaWEB笔记10 Javascript中的事件

文章目录

JavaWEB笔记10 Javascript中的事件

回顾在笔记09中对事件的基本介绍有：事件的基本类型，事件的绑定和解绑等，结合上节笔记中对事件的基本了解，本节将对于事件进行进一步详细的阐述以及案例演示：

一.表单验证：

在前端的交互界面中，表单算是一种比较常用的交互体了，对于表单验证，即就是用户在用户端输入表单内容时根据用户输入的内容在用户本地对齐进行验证，包括其格式等等，确保在提交之前给用户正确的信息提交反馈，在表单提交中可能会应用到的事件有：

焦点事件：针对表单onfocus 元素获得焦点，onblur 元素失去焦点oninput 事件，向表单中输入内容时就触发对应事件，在表单中常用到的是onblur作为监听事件
表单提交事件：onsubmit

JS实现表单验证的一些细节如下：

表单中的输入框对应的input标签中一定要有name值，在后台获取时会得到对应的JSON数据，name就是JSON数据中键的名称
表单的提交：‘type=submit’
表单标签：<form></form>
表单中的校验监听事件：οnblur=“checkValue()”
表单中用户在用户端输入信息时在格式错误时在输入框后面进行红色字体的显示：后面加一个span标签，动态操作样式和文本
对于上面的提示信息：可以直接写innerHTML，可以将style写成内联格式写进去
在form标签上加上onsubmit="checkall()"可以在函数中设置对应的检验方法来检验表单提交
将表单校验时各个信息框对应的各个方法的返回值设为boolean类型的，将checkall函数返回值为所有校验函数的且(用&&连接)

对于上面表单验证中的相关细节演示如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

	</head>
	<body>
		<center>
			<form action="#" method="get" onsubmit="return checkAll()">
				用户名：<input type="text" name="username" value="" placeholder="请输入用户名6-16字母" oninput="checkUsername()" />
				<span id="usp"></span>
				<br>
				密码： <input type="password" name="password" id="" value="" placeholder="请输入密码6-16数字"
					onblur="checkPassword()" /><span id="psp"></span><br>
				<input type="submit" value="提交" />
				<input type="reset" name="" id="" value="重置" />
			</form>
		</center>
		<script type="text/javascript">
		//校验所有表单项
		function checkAll(){
			return checkUsername()&&checkPassword();
		}
		
			//校验用户名
			function checkUsername() {
				//获取用户输入的内容
				var username = document.getElementsByName("username")[0].value;
				//alert(username);
				var regx = /^[a-z]{6,16}$/i;
				var flag = regx.test(username);
				var usp = document.getElementById("usp");

				if (flag) {
					//alert("规则正确")
					usp.innerHTML = "<b style='color:green;'>✔用户名规则正确</b>"
				} else {
					//alert("规则错误")
					usp.innerHTML = "<b style='color:red;'>✘用户名规则错误</b>"
				}
				return flag;
			}

			//校验密码
			function checkPassword() {
				//获取用户输入的内容
				var pwd = document.getElementsByName("password")[0].value;
				var regx = /^[1-9][0-9]{5,15}$/;
				var flag = regx.test(pwd);
				var psp = document.getElementById("psp");
				
				if (flag) {
					//alert("规则正确")
					psp.innerHTML = "<b style='color:green;'>✔密码规则正确</b>"
				} else {
					//alert("规则错误")
					psp.innerHTML = "<b style='color:red;'>✘密码规则错误</b>"
				}
				return flag;
			}
		</script>
	</body>
</html>

效果展示：
在这里插入图片描述

二.事件类型及演示：

事件类型有很多种，除了上节介绍的我们的鼠标点击事件外，在这里将介绍更多的常用事件，在介绍事件类型之前明确事件对象：event，在事件触发对应函数时传参传event就是事件本身，就可以取到对应的事件了，以下就是关于几种常用的事件类型的演示：

1.键盘事件：

按键事件指的是关于按键的按下和弹起所触发的事件，其中包括：

按键按下：onkeydown
按键松开：onkeypress
按键松开：onkeyup

其中结合事件对象event获取对应按下的按键的键盘码：event.keyCode可以得到键盘事件触发时的按键值（比较常用的有13对应enter键），在上面的事件中触发对应的键盘事件可以在事件后面加上.键盘码的形式进行绑定，常用键可以直接使用按键名，如：松开enter键进行触发：onkeypress.enter=触发事件的函数

2.表单事件：

表单事件中许多在上面的表单验证中有阐述一些细节，下面将常用到对应的表单事件以及表单事件效果再次重申：

确认按钮被点击：onsubmit
重置按钮被点击：onreset
输入时时刻校验：oninput

3.鼠标事件：

鼠标事件除了最常用的鼠标点击事件click之外，在JS中还提供了丰富的鼠标事件以便生成丰富的网页效果：

鼠标按下：onmousedown
鼠标移走：onmousemove
鼠标松开：onmouseup

在鼠标按下事件中，按下左键、滚轮、右键有两种事件属性可以判断对应按下的是哪一个键：
1）event.which：左键1 滚轮2 右键3）
2）event.button：左键0 滚轮1 右键2

4.页面加载事件：

页面加载事件主要指的是window.onload事件，其具体指：等页面所有元素加载完成再去调用，可以将对应的JS代码呈现出来：

下拉框：select标签中加入各种option value="值"标签
下拉框值切换事件：onchange
文本被选中事件：onselect可以处理进制复制效果等

三.事件对象的属性：

事件的属性是通过事件的对象进行调用的，因此在研究事件的属性之前要进行事件对象的传参，即获取事件对象event，在之前的介绍中有两个属性：keyCode获取键码和which/button获取鼠标点击键，下面还有两个：
1）event.target事件目标：
案例引入：在点击button背景颜色改变可以进行的处理有：

拿到button对象并对于button.style.cssText进行设置
方法输入时输入event和this，对于this传参表示绑定了该事件的元素对象
方法输入拿到event，通过事件对象属性获取绑定该事件目标元素：event.target或event.currentTarget
（上面两种属性在大部分情况没有区别，在标签嵌套时：
[1] 使用target获取触发了该事件的元素对象
[2] 使用currentTarget是绑定了该事件的元素对象）

2）event.type事件类型： event.type会显示事件类型
3）事件属性对应的事件中的常用方法：
对于事件嵌套产生的冒泡现象，点击标签里层触发事件会触发外面的事件（在事件流中会提及）：

防止冒泡事件的产生：event.stopPropagation()
阻止事件的默认行为：event.preventDefault（如a标签的跳转页面和form标签的同步提交，复习： 在之前的a标签阻止跳转：href="#" 或 href=“javascript:void(0)”）
form标签的同步提交阻止：在onsubmit绑定的函数中写event.preventDefault();

四.事件流，事件捕获和事件委托：

html中的标签都是相互嵌套的，我们可以将元素想象成一个盒子装一个盒子，document是最外面的大盒子。当你单击一个div时，同时你也单击了div的父元素，甚至整个页面。那么是先执行父元素的单击事件，还是先执行div的单击事件？？？这时就要提到事件流的概念了：

1.DOM事件流：

DOM 事件流会经历3个阶段：

捕获阶段
当前目标阶段
冒泡阶段
事件捕获：从外向内
事件冒泡：从内向外
现在遵循的是：先捕获再冒泡，JS中只能执行捕获和冒泡其中一个阶段

2.事件捕获和事件委托：

事件捕获：addEventListener('click'，函数名，true);参数中true为事件捕获，默认值为false为事件冒泡
事件委托：将所有子元素的事件委托给父元素，使用addEventListener进行委托：ul中嵌套多个li，获取ul对象后：对象名.addEventListener('click',function())就可以将li中的事件委托给ul

事件委托的原理和作用：
1）原理：给父元素注册事件，利用事件冒泡，当子元素的事件触发，会冒泡到父元素，然后去控制相应子元素
2）作用1：只操作了一次DOM，提高了程序性能
3）作用2：动态创建的子元素，也拥有事件

事件委托：

  <div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        // onclick 和 attachEvent（ie） 在冒泡阶段触发
        // 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 
        // son -> father ->body -> html -> document
        var son = document.querySelector('.son');
		// 给son注册单击事件
        son.addEventListener('click', function() {
            alert('son');
        }, false);
		// 给father注册单击事件
        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, false);
		// 给document注册单击事件，省略第3个参数
        document.addEventListener('click', function() {
            alert('document');
        })
    </script>

事件捕获：

    <div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        // 如果addEventListener() 第三个参数是 true 那么在捕获阶段触发
        // document -> html -> body -> father -> son
         var son = document.querySelector('.son');
		// 给son注册单击事件，第3个参数为true
         son.addEventListener('click', function() {
             alert('son');
         }, true);
         var father = document.querySelector('.father');
		// 给father注册单击事件，第3个参数为true
         father.addEventListener('click', function() {
             alert('father');
         }, true);
		// 给document注册单击事件，第3个参数为true
        document.addEventListener('click', function() {
            alert('document');
        }, true)
    </script>

五.案例一：鼠标跟随图片效果

使用JS实现对应的效果时需要将像素进行获取：

事件对象中属性	获取的坐标
e.clientX和e.clientY	鼠标在可视区的x和y坐标
e.pageX和e.pageY	鼠标在页面文档的x和y坐标
e.screenX和e.screenY	鼠标在电脑屏幕里的x和y坐标

思路：

监听的事件是鼠标移动事件
绑定的事件是整个页面上，绑定的是document上，即直接绑body上面
具体思路：取到鼠标在屏幕上的坐标并将该坐标给图片
标准浏览器中是浏览器给方法传递的参数，只需要定义形参e就可以获得到，或者window.event中获取
document.addEventListener(‘mousemove’,function(e){ //形参是事件
var x = e.pageX;
var y = e.pageY;
var img = document.getElementById(“tp”); //tp是在body中的图片img
img.style.left = x + “px”;
img.style.top = y + “px”;
})

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			img {
				position: absolute;
				/* left:200px;
				top:200px; */
			}
		</style>
	</head>
	<body>
		<img src="img/yazi.gif" id="tp">
	</body>
	<script type="text/javascript">
		//你要整个页面绑定事件，绑定 document 上
		//标准浏览器中是浏览器给方法传递的参数，只需要定义形参 e 就可以获取到。
		//或者 window.event 中获取事件对象
		document.addEventListener('mousemove', function(e) {
			//window.event; 获取事件对象
			//alert(window.event==e);
			//alert("abc");
			//事件对象中有属性可以获取坐标

			// 2. page 鼠标在页面文档的x和y坐标
			var x = e.pageX;
			var y = e.pageY;
			// alert(x);
			// alert(y);

			var img = document.getElementById("tp");
			img.style.left = x + "px";
			img.style.top = y + "px";

		})
	</script>
</html>

六.案例二：禁止右键菜单和禁止复制粘贴：

思路：

1）按s键开始搜索：e.keyCode==83时将页面的像素跳转至e.pageY=0px
2）禁止弹右键菜单：document.addEventListener(‘contextmenu’,function(e){e.preventDefault;})
3）禁止鼠标阔选：document.addEventListener(‘selectstart’,function(e){e.preventDefault;})
4）禁止复制粘贴：在body标签绑定οncοpy=“return false” οnpaste=“return false”
5）禁止剪切：在body标签绑定oncut=“return false”
6）禁止复制粘贴如果需要弹框：将对应的事件抽出来就好

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body oncopy="return show(event)"  oncut="return false" οnpaste="return false">
		<p>一段文字描述一段文字描述一段文字描述一段文字描述一段文字描述一段文字描述一段文字描述</p>
	</body>
	<script type="text/javascript">
	//阻止右键菜单 contextmenu
		 document.addEventListener('contextmenu',function(e){
			e.preventDefault();
		}) 
		/* //阻止鼠标标签
		document.addEventListener('selectstart',function(e){
			e.preventDefault();
		}) */
		function show(e){
			alert("你不是会员，不能复制");
			 //e.preventDefault();
			return false;
		}
		
	</script>
</html>

七.案例三：省市二级联动选框：

思路：

省在选择下拉框中可以写死，但是对于其中的市不能写死，要根据省份的选择动态生成
select标签中的option第一个是请选择省份，这样在下拉框中切换时可以监听对应的切换事件
在JS中先拿到对应的省市对象，将省份option中进行得到对应编号selectedIndex，返回下拉框编号
设计一个二维数组存对应省的对应市，这样得到对应省编号之后直接去遍历二维数组，得到市的一位数组，并将遍历到的数组去展示
展示时使用对应的appendChild进行追加，但是在切换时要清除上一次选择的对应的信息，或者直接使用对应的.innerHTML="<option>--arr[i]--</option>"
清空选框中信息：city.innerHTML="<option>--请选择城市--</option>"

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<select name="sheng" id="sheng" onchange="selectSheng()">
			<option value="">--请选择省份--</option>
			<option value="1">陕西</option>
			<option value="2">河南</option>
		</select>
		<select name="city" id="city">
			<option value="">--请选择城市--</option>
		</select>
	</body>

	<script type="text/javascript">
		var sheng = document.getElementById("sheng");
		var city = document.getElementById("city");
		//数据，采用二维数组来存储
		var citys = [
			[],
			['西安', '咸阳', '安康', '宝鸡', '商洛', '榆林'],
			['郑州', '南阳', '安阳', '开封']
		];

		function selectSheng() {
			//city.innerHTML="<option>--请选择城市--</option>";
			
			//返回或设置下拉列表中的选项数目。
			city.length=1;
			
			//怎么知道他选择了哪一项呢？
			//selectedIndex 设置或返回下拉列表中被选项目的索引号。
			var index = sheng.selectedIndex;
			//取出这个省份对应的城市数组
			var arr = citys[index];
			//遍历城市数组，城市添加到第二个下拉框中
			for (var i = 0; i < arr.length; i++) {
				//var option = document.createElement("option");
				//var text = document.createTextNode(arr[i]);
				//option.appendChild(text);
				//city.appendChild(option);
				city.innerHTML+="<option>"+arr[i]+"</option>"
			}
		}
	</script>
</html>

八.案例四：秒杀倒计时效果：

思路：

获取秒杀时间的毫秒值，再获取现在的毫秒值，将二者之差进行换算成 ”XXXX天–XX时–XX秒“ 的格式
获取秒杀那天的毫秒值：将那天的秒杀时间进行传参

RainOnTheMoon

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaWEB笔记10 Javascript中的事件

JavaWEB笔记10 Javascript中的事件文章目录JavaWEB笔记10 Javascript中的事件一.表单验证：二.事件类型及演示：1.键盘事件：2.表单事件：3.鼠标事件：4.页面加载事件：三.事件对象的属性：四.事件流，事件捕获和事件委托：1.DOM事件流：2.事件捕获和事件委托：五.案例一：鼠标跟随图片效果六.案例二：禁止右键菜单和禁止复制粘贴：七.案例三：省市二级联动选框：八.案例四：秒杀倒计时效果：回顾在笔记09中对事件的基本介绍有：事件的基本类型，事件的绑定和解绑等，结合上节笔
复制链接

扫一扫