• JavaScript中DOM文档事件

    说明：DOM事件是JavaScript学习过程中非常重要的一个环节。

    目录

    一、事件 

    1.事件

    2.事件三要素

    3.事件流的三个阶段 

    二、相关API 

    1.窗口事件 

    ①当窗口获得焦点时候onfocus

    ②窗口加载完成后onload

    ③获得焦点时候改变背景颜色

    ④oninput 当文本框内容改变时 ，立即将改变内容 输出在控制台

    2.表单事件

    3.键盘事件 

    ①键盘按下事件onkeydown

    ②键盘松开事件onkeyup

    ③按下并松开事件onkeypress

    ④方向键操作盒子案例

    4.鼠标事件

    前言：今天我们首先会简单介绍一下事件流的相关知识点，之后我们会从窗口事件，表单事件，键盘事件，鼠标事件四个方面详细讲解相关API的使用。

    一、事件 

    1.事件

    事件：触发-响应机制。
    事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。

    2.事件三要素

    •         事件源:触发(被)事件的元素
    •         事件名称: click 点击事件
    •         事件处理程序:事件触发后要执行的代码(函数形式)

    3.事件流的三个阶段 

    1.    捕获：从 window 对象传到 目标元素。
    2.    目标阶 段：事件通过捕获，到达目标元素，这个阶段就是目标阶段。
    3.    冒泡：从目标元素传到 Window 对象

     

    二、相关API 

    1.窗口事件 

            获得焦点事件：

    ①当窗口获得焦点时候onfocus

    1. window.onfocus = function(){
    2.  
    3. document.write("窗口获得了焦点");
    4.  
    5. }
    6.  
    7. 当窗口失去焦点时候onblur
    8.  
    9. window.onblur = function(){
    10.  
    11. console.log("窗口失去了焦点")
    12.  
    13. }

    ②窗口加载完成后onload

    1. window.onload = function(){
    2.  
    3. console.log("窗口加载完成")
    4.  
    5. }
    6.  
    7. 窗口大小改变onresize
    8.  
    9. window.onresize = function(){
    10.  
    11. alert("窗口大小改变")
    12.  
    13. }

    ③获得焦点时候改变背景颜色

    1. var userCode = document.getElementById("userCode");
    2.  
    3. userCode.onfocus = function(){
    4.  
    5. this.style.backgroundColor = "red";//this指定当前窗口
    6.  
    7. }
    8.  
    9. console.log("这个")
    10.  
    11. onchange 内容改变事件
    12.  
    13. userCode.onchange = function () {
    14.  
    15. console.log(userCode.value);
    16.  
    17. }

    ④oninput 当文本框内容改变时 ，立即将改变内容 输出在控制台

    1. userCode.oninput = function () {
    2.  
    3. console.log(userCode.value);
    4.  
    5. }
    6.  
    7. oninvalid获取表单 未能提交时
    8.  
    9. userCode.oninvalid = function () {
    10.  
    11. console.log("请您完成表单的内容!");
    12.  
    13. }
    14.  
    15. onselect当文本框内容被选中时
    16.  
    17. userCode.onselect = function () {
    18.  
    19. // this
    20.  
    21. console.log("您已经选择了文本框!");
    22.  
    23. }

    2.表单事件

    表单验证案例：

    2. 	<head>
    3. 		<meta charset="utf-8">
    4. 		<title>title>
    5. 	head>
    6. 	<body>
    7. 		
    8. 		
    9. 		
    10. 		
    11. 		
    12. 		<form action="#" method="get" id="mForm">
    13. 		    
    14. 		    <table border="1" align="center">
    15. 		        <tr>
    16. 		            <td>账号：td>
    17. 		            <td><input type="text" id="zhanghao"/>
    18. 		                
    19. 		            td>
    20. 		        tr>
    21. 		        <tr>
    22. 		            <td>密码：td>
    23. 		            <td><input type="password" id="mimaOne"/>
    24. 		                
    25. 		            td>
    26. 		        tr>
    27. 		        <tr>
    28. 		            <td>确认密码：td>
    29. 		            <td>
    30. 		                <input type="password" id="mimaTwo"/>
    31. 		                
    32. 		            td>
    33. 		        tr>
    34. 		        <tr>
    35. 		            <td>手机号码：td>
    36. 		            <td><input type="text" id="phone"/>
    37. 		                
    38. 		            td>
    39. 		        tr>
    40. 		        <tr>
    41. 		            <td>性别：td>
    42. 		            <td>
    43. 		                <label><input type="radio" name="sex" checked/>男label>
    44. 		                <input type="radio" name="sex" id="sex1"/><label for="sex1">女label>
    45. 		            td>
    46. 		        tr>
    47. 		        <tr>
    48. 		            <td>年级：td>
    49. 		            <td>
    50. 		                <select id="nianji">
    51. 		                    <option value="0">---请选择---option>
    52. 		                    <option value="1">一年级option>
    53. 		                    <option value="2">二年级option>
    54. 		                    <option value="3">三年级option>
    55. 		                    <option value="4">四年级option>
    56. 		                select>
    57. 		                
    58. 		            td>
    59. 		        tr>
    60. 		        <tr>
    61. 		            <td>邮箱：td>
    62. 		            <td><input type="text" id="email"/>
    63. 		               
    64. 		            td>
    65. 		        tr>
    66. 		        <tr>
    67. 		            <td>身份证号码：td>
    68. 		            <td><input type="text" id="shenfenzheng"/>
    69. 		               
    70. 		            td>
    71. 		        tr>
    72. 		        <tr>
    73. 		            <td colspan="2" align="center">
    74. 		                <input type="submit"/>
    75. 		                <input type="reset"/>
    76. 		            td>
    77. 		        tr>
    78. 		    table>
    79. 		form>
    80. 		
    81. 		<script>
    82. 			
    83. 			//获取表单
    84. 			var mForm = document.getElementById("mForm");//表单
    85. 			//根据id获取值
    86. 			let zhanghao = document.getElementById("zhanghao");//账号
    87. 			let mimaOne = document.getElementById("mimaOne");//密码
    88. 			let mimaTwo = document.getElementById("mimaTwo");//确认密码
    89. 			let phone = document.getElementById("phone");//电话
    90. 			let sex = document.getElementById("sex1");//性别
    91. 			let nianji = document.getElementById("nianji");//年级
    92. 			let email = document.getElementById("email");//邮箱
    93. 			
    94. 			//正则表达式
    95. 			var code = /^[A-Za-z0-9]{6,16}$///账号
    96. 			var pass = /^(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*()_+?<>])[^]{6,}$/;
    97. 			var ph = /^1[3456789]\d{9}$/;
    98. 			var em = /^[a-zA-Z0-9_-]{4,16}@[a-zA-Z0-9_-]{2,}\.+[comn]{2,3}$/;
    99. 			var uId = /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
    100. 			
    101. 			mForm.onsubmit = function(){
    102. 				//删除多余span
    103. 				var spanSum = document.getElementsByTagName("span");
    104. 				if (spanSum != '') {
    105. 					for (let i = 0; i < spanSum.length; i++) {
    106. 						spanSum[i].remove();
    107. 					}
    108. 				}
    109. 				
    110. 				var err = document.createElement("span");
    111. 				if(zhanghao.value==''){
    112. 					err.innerHTML='账号不能为空';
    113. 					err.style.color='red';
    114. 					zhanghao.parentElement.appendChild(err);
    115. 				}else if(!code.test(zhanghao.value)){
    116. 					err.innerHTML='账号格式不正确';
    117. 					err.style.color='red';
    118. 					zhanghao.parentElement.appendChild(err);
    119. 				}else if(mimaOne.value==''){
    120. 					err.innerHTML='密码不能为空';
    121. 					err.style.color='red';
    122. 					mimaOne.parentElement.appendChild(err);
    123. 				}else if(!pass.test(mimaOne.value)){
    124. 					err.innerHTML='密码格式不正确';
    125. 					err.style.color='red';
    126. 					mimaOne.parentElement.appendChild(err);
    127. 				}else if(mimaTwo.value==''){
    128. 					err.innerHTML='密码不能为空';
    129. 					err.style.color='red';
    130. 					mimaTwo.parentElement.appendChild(err);
    131. 				}else if(!pass.test(mimaTwo.value)){
    132. 					err.innerHTML='密码格式不正确';
    133. 					err.style.color='red';
    134. 					mimaTwo.parentElement.appendChild(err);
    135. 				}else if(mimaOne.value!=mimaTwo.value){
    136. 					err.innerHTML='密码不一致';
    137. 					err.style.color='red';
    138. 					mimaTwo.parentElement.appendChild(err);
    139. 				}else if(phone.value==''){
    140. 					err.innerHTML='电话号码不能为空';
    141. 					err.style.color='red';
    142. 					phone.parentElement.appendChild(err);
    143. 				}else if(!ph.test(phone.value)){
    144. 					err.innerHTML='手机号码格式错误';
    145. 					err.style.color='red';
    146. 					phone.parentElement.appendChild(err);
    147. 				}else if(nianji.value==''){
    148. 					err.innerHTML='请选择年级';
    149. 					err.style.color='red';
    150. 					nianji.parentElement.appendChild(err);
    151. 				}else if(email.value==''){
    152. 					err.innerHTML='邮箱不能为空';
    153. 					err.style.color='red';
    154. 					email.parentElement.appendChild(err);
    155. 				}else if(em.test(email)){
    156. 					err.innerHTML='邮箱格式不正确';
    157. 					err.style.color='red';
    158. 					email.parentElement.appendChild(err);
    159. 				}else if(shenfenzheng.value==''){
    160. 					err.innerHTML='身份证不能为空';
    161. 					err.style.color='red';
    162. 					shenfenzheng.parentElement.appendChild(err);
    163. 				}else if(uId.test(shenfenzheng.value)){
    164. 					err.innerHTML='身份证格式不正确';
    165. 					err.style.color='red';
    166. 					shenfenzheng.parentElement.appendChild(err);
    167. 				}else{
    168. 					return true;
    169. 				}
    170. 				return false;
    171. 			}
    172. 			
    173. 			
    174. 		script>
    175. 	body>
    176. html>

    3.键盘事件 

    ①键盘按下事件onkeydown

    1. window.onkeydown = function(event){
    2. 		//解决兼容问题
    3. 		event = event || window.event;
    4. 		console.log("键盘按下了" + event.keyCode);
    5. 		if(event.keyCode==13){
    6. 			console.log("按下了回车");
    7. 		}
    8. 	}

    ②键盘松开事件onkeyup

    1. window.onkeyup = function(event){
    2. 		//解决兼容问题
    3. 		event = event || window.event;
    4. 		console.log("键盘松开了"+event.keyCode);
    5. 		if(event.keyCode==13){
    6. 			console.log("松开了回车");
    7. 		}
    8. 	}

    ③按下并松开事件onkeypress

    1. window.onkeypress = function (event) {
    2. 		event = event || window.event;
    3. 		console.log("键盘按下了" + event.keyCode);
    4. 		if (event.keyCode == 13) {
    5. 			console.log('按下了回车');
    6. 		}
    7. 	}

    ④方向键操作盒子案例

    1. CSS部分：
    3. HTML部分：
    4. 			var box = document.getElementById("box");
    5. 			document.onkeydown = function (event) {
    6. 				event  = event ||window.event;
    7. 		
    8. 				switch (event.keyCode) {
    9. 					case 37:
    10. 						box.style.left = box.offsetLeft - 10+'px';
    11. 						break;
    12. 					case 39:
    13. 						box.style.left = box.offsetLeft + 10+'px';
    14. 						break;
    15. 					case 38:
    16. 						box.style.top = box.offsetTop - 10+'px';
    17. 						break;
    18. 					case 40:
    19. 						box.style.top = box.offsetTop + 10+'px';
    20. 						break;
    21. 				}
    22. 			}

    4.鼠标事件

    • onmouseenter：当鼠标进入了当前的DIV
    • onmouseleave：当鼠标移出了当前的DIV
    • onscroll：当滚动元素的滚动条运行时
    • onmousewheel：当鼠标的滚轮运行时

    案例代码：

    2. <head>
    3.     <meta charset="UTF-8">
    4.     <title>Titletitle>
    5. head>
    6. <body>
    7. <div onmouseenter="divMouseenter()"
    8.      onmouseleave="divMouseleave()"
    9.      style="width: 300px;height: 300px;background: red">
    10.     <div onmouseenter="divMouseenter()"
    11.          onmouseleave="divMouseleave()"
    12.          style="width: 100px;height: 100px;background: pink">
    13.     div>
    14. div>
    15.  
    16. <div id="box" style="overflow: scroll;width: 200px;height: 200px;">
    17. 这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
    18.     这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
    19.     这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
    20.     这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
    21.     这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
    22.     这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
    23.     这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
    24.     这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
    25.     这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
    26. div>
    27.  
    28. <script>
    29.     /* onmouseenter ： 可以阻止事件冒泡 */
    30.     function divMouseenter() {
    31.         console.log("当鼠标进入了当前的DIV");
    32.     }
    33.     /* onmouseleave ： 可以阻止事件冒泡 */
    34.     function divMouseleave() {
    35.         console.log("当鼠标移出了当前的DIV");
    36.     }
    37.     document.getElementById("box").onscroll = function () {
    38.         console.log("当滚动元素的滚动条运行时");
    39.     }
    40.     /* 当鼠标的滚轮运行时 */
    41.     window.onmousewheel=function (){
    42.         console.log("当鼠标的滚轮运行时");
    43.     }
    44. script>
    45. body>
    46. html>

    又是一年中秋时，今年你吃的什么味道的月饼呢(*^▽^*) 

    怀念学习油泼辣子口味的YYDS！！！ 

  • 相关阅读:
    智能汽车软硬件产品CES展示汽车技术新亮点
    (2) ESP32获取图像电脑端显示，并跟踪对应颜色
    python | 自动化exe程序
    什么是信息摘要？
    UE4 EQS环境查询 学习笔记
    MALUNet：一种多关注，轻量级的皮肤病变分割UNet
    九齐NY8A051H单片机概述及特征应用
    Spring之Bean生命周期
    渗透测试-Python安全工具编程基础
    MySQL主主复制
  • 原文地址：https://blog.csdn.net/m0_46420244/article/details/126770460