【Web】事件与正则表达式_web正则表达式-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_53217341/article/details/134360613

本文详细介绍了网页开发中的事件与事件处理，如焦点、键盘、页面加载、鼠标操作等，并深入讲解了正则表达式的概念、元字符、量词、位置匹配和分组等，以及如何在JavaScript中使用它们进行数据验证和匹配。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

事件与正则表达式

一、事件与事件处理 🌵

1.事件: 指的是在页面中对元素控件进行的各种操作, 比如用户点击button按钮时，就产生点击事件;

一个页面被浏览器加载出来时，就会触发页面加载事件…;

2.常见的事件(ps: 用户在进行哪些操作会产生事件场景:事件<—>触发的场景);

1>焦点场景：

失去焦点: onblur

获得焦点: onfocus

例:

<!DOCTYPE html>
<html>
<head>
	<title>焦点事件</title>
	<script>
		function onFocus() {
			document.getElementById("status").innerHTML = "获得焦点";
		}
		
		function onBlur() {
			document.getElementById("status").innerHTML = "失去焦点";
		}
	</script>
</head>
<body>
	<label for="input">用户名：</label>
	<input type="text" id="input" onFocus="onFocus()" onBlur="onBlur()">
	<div id="status"></div>
</body>
</html>

2>键盘事件:

按下任意键触发: onkeydown

按下任意按键且产生一个字符触发:onkeypress

释放任意键盘按键触发: onkeyup

3>页面加载事件: onload

4>点击事件:

单击鼠标左键: onclick

双击鼠标左键: ondblclick

5>鼠标事件:

按下鼠标任意按键: onmoursedown

鼠标在控件上移动: onmosemove

鼠标移开控件触发: onmouseout

鼠标移到控件触发: onmouseover

释放鼠标任意按键: onmousesetup

例:

<!DOCTYPE html>
<html>
<head>
	<title>鼠标事件</title>
	<script>
		function onMouseOver() {
			document.getElementById("status").innerHTML = "鼠标移入";
		}
		
		function onMouseOut() {
			document.getElementById("status").innerHTML = "鼠标移出";
		}
		
		function onMouseDown() {
			document.getElementById("status").innerHTML = "鼠标按下";
		}
		
		function onMouseUp() {
			document.getElementById("status").innerHTML = "鼠标释放";
		}
		
		function onClick() {
			document.getElementById("status").innerHTML = "鼠标单击";
		}
		
		function onDblClick() {
			document.getElementById("status").innerHTML = "鼠标双击";
		}
		
		function onContextMenu() {
			document.getElementById("status").innerHTML = "鼠标右键菜单";
			return false; // 阻止默认菜单
		}
		
		function onWheel(event) {
			if (event.deltaY < 0) {
				document.getElementById("status").innerHTML = "滚轮向上滚动";
			} else if (event.deltaY > 0) {
				document.getElementById("status").innerHTML = "滚轮向下滚动";
			}
		}
	</script>
</head>
<body>
	<div id="box" style="width: 200px; height: 200px; background-color: lightgray;"
	     onmouseover="onMouseOver()" onmouseout="onMouseOut()" onmousedown="onMouseDown()"
	     onmouseup="onMouseUp()" onclick="onClick()" ondblclick="onDblClick()"
	     oncontextmenu="return onContextMenu()" onwheel="onWheel(event)">
	    <p>鼠标事件</p>
    </div>
    <div id="status"></div>
</body>
</html>

6>其他事件:

点击重置按钮: onreset

点击提交按钮: onsubmit

都是放在标签中进行捆绑;

3.事件处理方式<函数>

<开始标签事件=函数名()></结束标签>

备注事件处理的过程，依赖于函数，当某个事件被触发，让该事件所做事情对应的代码，全部封装在函数中;

格式：

            <script language="Javascript">
                       //事件处理
                       function  函数名(){
                           代码块;
                       }
            </script>

例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js</title>
		
		<script language="JavaScript">
			
			//定义一个函数：实现加载事件的处理
			function jz(){
				//提示
				alert("页面即将被加载完成！");
			}
			
			//定义一个函数：实现鼠标事件的处理
			function shubiao(){
				//提示
				alert("鼠标事件被触发啦！")
			}
			
			//定义一个函数：实现点击事件的处理
			function dianji(){
				//提示
				alert("你点我干嘛！");
			}
			
			
			//声明一个函数：实现重置操作的处理
			function  chongzhi(){
				//提示
				alert("我被重置啦！");
			}
			
			//声明一个函数：实现提交操作的处理
			function  tijiao(){
				//提示
				alert("我要被提交啦");
			}
			
			//声明一个函数：实现获得焦点的处理
			function jiaodian(){
				//提示
				alert("我获得焦点啦！")
			}
			
		</script>
		
	</head>
	<body onload="loaded()">
		
		<form action="index.html" method="get" onreset="chongzhi()" onsubmit="tijiao()">
			
			用户名：<input type="text" onkeyup="shubiao()" onfocus="jiaodian()"/>   <br><br>
			
			<input type="button" value="普通按钮"  onmousemove="dianji()"/>
			
			<input type="reset" value="重置按钮" />
			
			<input type="submit" value="提交按钮" />
			
			
		</form>
		
		
	</body>
</html>

二、正则表达式

1.概述:

正则表达式，提供了一个字符模板，通过该字符模板来匹配各个输入项数据的合法性或正确性；

2.常见的元字符

2.1 正则表达式是由【普通字符】+【元字符】组成的模板式字符串

2.2、字符类🏷

[…] 匹配中括号内任意的一个字符；

[^…] 不能出现中括号里的字符；

'_'连字符,表示范围[0-9] 0 1 2 3 4 5 6 7 8 9

\d 匹配一个数字

\D 匹配任意一个非数字数据

\w 匹配大小写字母，数字，‘_’ 下划线

2.3、量词📲

’ ? ’ 匹配前一项最多1次

’ + ’ 匹配前一项最少1次

’ * ’ 匹配前一项任意次

’ {n} ’ 匹配前一项恰好n次

’ {n,} ’ 匹配前一项至少n次

’ {n,m} ’ 匹配前一项至少n次,但不少于m次;

2.4、指定位置⌚️

’ ^字符 ’ 匹配以该字符开头的数据

’ 字符$ ’ 匹配以该字符结尾的数据

’ 字符\b ’ 匹配该字符出现单词边界

’ 字符\B ’ 匹配该字符出现单词非边界

2.5、选择匹配符 🍂

字符1 | 字符2 两边二选一，能够匹配其中任意一个即可

2.6、分组 () ⚡️

通过小括号可以把多个字符括起来，看成是一个整体，对该整体做操作

例:

J(AVA)+ AVA看成是一个整体，至少出现一次

3.正则表达式声明以及判定操作0️⃣

1>声明：var 变量名(正则表达式对象)=/字符模板/;

2>判定一：test() 匹配成功返回true，否则返回false

变量名.test(“检测/匹配数据”);

3>判定二：exec() 匹配失败，返回null；匹配成功，返回一个数组

数组: 等同于数学的==集合==，存储多个数据

注意: 匹配成功后，返回的数组中数据是如何划分的？

数组中的第一个元素值：匹配成功的数据，剩下的每一个元素值，它是以正则表达式/字符模板中的分组作为划分节点，一个分组，代表的是一个元素值

在JS代码中获取输入框的内容/数据：借助于表单标签的name属性：表单name.输入框name.value;

例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>正则表达式</title>
		<script language="JavaScript">
			
			//①声明：var   变量名(正则表达式对象)=/字符模板/;
			var  m=/\d/;  //匹配一个数字
			var  n=/JS+/; //匹配前一项最少1次

			//②判定一：test()   匹配成功返回true，否则返回false
			//变量名.test("检测/匹配数据");
			var pp01=m.test(2);//匹配数字
			//输出
			alert("检测2的结果是:"+pp01); //true
			
			var pp02=m.test("J");
			alert("检测J的结果是："+pp02);//false
			
			var pp03=n.test("JScript");
			alert("检测JScript的结果是："+pp03);//true
			
			var pp04=n.test("cript");
			alert("检测cript的结果是："+pp04);//false
		</script>
	</head>
	<body>
	</body>
</html>