• Web前端 | JavaScript（事件）

    ✅作者简介：一位材料转码农的选手，希望一起努力，一起进步！

    📃个人主页：@每天都要敲代码的个人主页

    🔥系列专栏：Web前端

    目录

    一：JS中的事件

    1. 常用事件

    2. 注册事件的两种方式

    3. 代码的执行顺序

    4. 捕捉回车键

    二：JS运算符之void

    三：JS的控制语句

    一：JS中的事件

    1. 常用事件

    （1）关于焦点

            blur 失去焦点    
            focus 获得焦点

    （2）关于单击双击                  
            click 鼠标单击
            dblclick 鼠标双击

    （3）关于键盘                   
            keydown 键盘按下
            keyup 键盘弹起

    （4）关于鼠标                  
             mousedown 鼠标按下

             mouseup 鼠标弹起
             mouseover 鼠标经过
             mousemove 鼠标移动
             mouseout 鼠标离开      

    （5）关于表单                    
            reset 表单重置
            submit 表单提交

    （6）单独记忆                    
            change下拉列表选中项改变，或文本框内容改变
            select 文本被选定
            load 页面加载完毕（整个HTML页面中所有的元素全部加载完毕之后发生）

    2. 注册事件的两种方式

    （1）任何一个事件都会对应一个事件句柄，事件句柄是在事件前添加on。onXXX这个事件句柄出现在一个标签的属性位置上。（事件句柄以属性的形式存在）

    （2）注册事件的两种方式：

    第一种方式：直接在标签中使用事件句柄

            在句柄中调用JS代码，页面打开的时候不会执行，点的时候才会执行

            将doSome函数注册到按钮上，等待click事件发生之后，该函数被浏览器调用。我们称这个函数为回调函数

            回调函数的特点：自己把这个函数代码写出来了,但是这个函数不是自己负责调用,由其他程序负责调用该函数

    第二种方式：是使用纯JS代码完成事件的注册

            先定义一个按钮，使用这种方式需要给按钮带上id属性

            第一步：获取这个按钮对象，调用document这个内置对象的getElementById方法，document就代表整个HTML页面

            第二步：给按钮对象的onclick属性赋值，接把函数名拿过来,不要加小括号

    1. DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		
    9. 		<script type = "text/javascript">
    10. 			function doSome(){
    11. 				alert("doSome....!");
    12. 			}
    13. 		script>
    14. 		
    15. 		<input type="button" value="button1" onclick="doSome()"/>
    16. 		
    17. 		
    18. 		<input type="button" value="button2" id="button2" />
    19. 		
    20. 		
    21. 		<input type="button" value="button3" id="niming" />
    22. 		
    23. 		<script type="text/javascript">
    24. 			function doOther(){
    25. 				alert("doOther....!");
    26. 			}
    27. 			// 第一步:获取这个按钮对象
    28. 			// document是全部小写，内置对象，可以直接用，document就代表整个HTML页面		
    29. 			var btnObj = document.getElementById("button2");
    30. 			// 第二步:给按钮对象的onclick属性赋值
    31. 			// 直接把函数名拿过来,不要加小括号
    32. 			// 这行代码的含义是,将回调函数doOther注册到click事件上
    33. 			btnObj.onclick = doOther; 
    34. 			
    35. 			
    36. 			// 采用匿名函数的方式
    37. 			var nimingObj = document.getElementById("niming");
    38. 			// 这个函数在页面打开的时候只是注册上,不会被调用,在click事件发生之后才会调用 
    39. 			nimingObj.onclick = function(){
    40. 				alert("niming....!");
    41. 			}
    42. 			
    43. 			// 上面两行代码合并
    44. 			document.getElementById("niming").onclick = function(){
    45. 				alert("合并代码...！")
    46. 			}
    47. 		script>
    48. 		
    49. 	body>
    50. 	
    51. 	
    52. html>

    3. 代码的执行顺序

    （1）把脚本写在按钮上面，此时通过id获取节点对象时，返回的就是null，因为此时此时按钮还没有加载到内存！

    （2）要想把脚本写在按钮上面，需要在body标签后面使用onload事件，先进行加载！

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	
    8. 	<body onload="ready()">
    9. 		<script type="text/javascript">
    10. 			// 根据id获取节点对象时,返回null
    11. 			// 因为代码执行到此处的时候id="mybutton"的元素还没有加载到内存
    12. 			/* 
    13. 			document.getElementById("mybutton").onclick = function(){
    14. 				alert("mybutton...!")
    15. 			} */
    16. 			
    17. 			// 执行onload加载, 页面全部元素加载完毕之后才会发生
    18. 			function ready(){
    19. 				document.getElementById("mybutton").onclick = function(){
    20. 					alert("mybutton...!")
    21. 				}
    22. 			}
    23. 		script>
    24. 		
    25. 		
    26. 		<input type="button" value="mybtn" id="mybutton" />
    27. 	body>
    28. html>

    （1）onload也可以不写body后面，调用window.onload = ready直接写到JS代码里 

    （2）假设外面这个回调函数叫做a，里面这个回调函数叫做b：

                    页面加载的过程中,将a函数注册给了load事件
                    页面加载完毕之后,load事件发生了,此时执行回调函数a
                    回调函数a执行的过程中,把b函数注册给了id="btn"的click事件
                    当id="btn"的节点发生click事件之后,b函数被调用并执行

    1. DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<script type="text/javascript">
    9. 			
    10. 			window.onload = ready;
    11. 			
    12. 			function ready(){
    13. 				document.getElementById("mybutton").onclick = function(){
    14. 					alert("mybutton...!")
    15. 				}
    16. 			}
    17. 			
    18. 			// 继续采用匿名函数的方式，进行合并
    19. 			// 外面回调函数:在页面加载完毕执行
    20. 			// 页面打开的时候注册上去的
    21. 			window.onload = function(){ // 这个回调函数叫做a
    22. 				// 里面回调函数:鼠标单击按钮,发生事件执行
    23. 				// 页面加载完毕注册上去的
    24. 				document.getElementById("mybutton").onclick = function(){ // 这个回调函数叫做b
    25. 					alert("mybutton...!")
    26. 				}
    27. 			}
    28. 		script>
    29. 		
    30. 		
    31. 		<input type="button" value="mybtn" id="mybutton" />
    32. 	body>
    33. html>

    补充：一个节点对象中只要有的属性都可以"."

    例如：将一个文本框改成复选框

    1. DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<script type="text/javascript">
    9. 			// 要求点击按钮就可以把文本框改成复选框
    10. 			window.onload = function(){
    11. 				document.getElementById("mybutton").onclick = function(){
    12. 					// 拿到mytext节点对象
    13. 					var mytext = document.getElementById("mytext");
    14. 					mytext.type="checkbox";
    15. 				}
    16. 			}
    17. 			
    18. 		script>
    19. 		<input type="text" id="mytext" />
    20. 		<input type="button" value="将文本框改成复选框" id="mybutton" />
    21. 	body>
    22. html>

    4. 捕捉回车键

    （1）我们平常登录，不需要点击登录按钮，直接按回车键也可以登录成功，什么原理呢？又是怎么捕捉的呢？

    （2）对于“键盘事件对象"来说,都有keyCode属性用来获取键值

    （3）回车键的键值是13，ESC键的键值是27。

    （4）首先通过document.getElementById(id)获取文本框对象；然后在调用键盘按下事件"对象.onkeydown"，最后在通过局部变量调用“.keyCode”可以获取键值

    1. DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<script type="text/javascript">
    9. 			window.onload = function(){
    10. 				// 获取文本框对象
    11. 				var username = document.getElementById("username");
    12. 				/*
    13. 				usernameElt.onkeydown = function(a, b, c){
    14. 					// 获取键值,只有一个变量是用来接收值的，写多了也没用
    15. 					// alert(a); // [object KeyboardEvent]
    16. 					// alert(b); // undefined
    17. 					// alert(c); // undefined
    18. 				}
    19. 				*/
    20. 				// 调用键盘按下
    21. 				username.onkeydown = function(event){ // event是事件，局部变量
    22. 					// 对于“键盘事件对象"来说,都有keyCode属性用来获取键值.
    23. 				    // alert(event.keyCode);
    24. 					// 回车键的键值是13
    25. 					// 这样只有按回车才会登录验证
    26. 					if(event.keyCode == 13){
    27. 						alert("登录验证...");
    28. 					}
    29. 					
    30. 				}
    31. 			}
    32. 		script>
    33. 	body>
    34. 	用户：<input type="text" id = "username" />
    35. html>

    二：JS运算符之void

    （1）void运算符的语法：void(表达式)
    （2）运算原理：执行表达式，但不返回任何结果。
    （3）例如：javascript:void(0)，数字可以随便写，但是不能省略不写其中javascript：作用是告诉浏览器后面是一段JS代码；程序的javascript:是不能省略的。

    （4）需求：我们既保留住超链接的样式，同时用户点击该超链接的时候执行一段JS代码后，会继续保持当前位置页面，不会跳转到页面顶部！

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		页面顶部<br>
    9. 		<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    10.         <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    11. 		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    12.         <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    13. 		
    14. 		<a href="javascript:void(0)" onclick="window.alert('test code')">
    15. 			既保留住超链接的样式，同时用户点击该超链接的时候执行一段JS代码，但页面还不能跳转
    16. 		a>
    17. 	body>
    18. html>

    三：JS的控制语句

    （1）if switch while do...while  for break continue和Java的用法一样
    （2）特殊的for..in语句 和 with语句 都是了解即可
    （3）使用for..in语句可以遍历数组，以及遍历一个对象的属性

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<script type="text/javascript">
    9. 			
    10. 			// 定义一个数组
    11. 			// JS中数组中元素的类型随意, 元素的个数随意
    12. 			 var arr = [false,true,1,2,"abc",3.14]; 
    13. 			 // 遍历数组
    14. 			 for(var i = 0;ilength;i++){
    15. 				 alert(arr[i]);
    16. 			 }
    17. 			 
    18. 			 // 使用for...in语句遍历数组
    19. 			 for(var i in arr){
    20. 				 // alert(i); // i是变量名，得到的数组下标
    21. 				 alert(arr[i]);
    22. 			 }
    23. 			 
    24. 			 // 使用for..in语句可以遍历对象的属性
    25. 			 User = function(username,password){
    26. 				 this.username = username;
    27. 				 this.password = password;
    28. 			 }
    29. 			 var u = new User("张三","111");
    30. 			 
    31. 			 // 1.常用的两种访问属性的方法
    32. 			 alert(u.username+","+u.password);
    33. 			 alert(u["username"]+","+u["password"]);			 
    34. 			 // 2.使用for...in访问属性
    35. 			 for(var i in u){
    36. 				 // alert(i); // i是属性名,得到的是username和password
    37. 				 // alert(type i); // 得到类型都是string类型
    38. 				 // i本身就是一个字符串,所以不需要再加双引号""
    39. 				 alert(u[i]);
    40. 			 }
    41. 			 
    42. 			 // 3.使用with访问属性
    43. 			 with(u){
    44. 				 alert(username+ "," + password);
    45. 			 }
    46. 		script>
    47. 	body>
    48. html>

  • 相关阅读:
    Linux中USB协议栈框架详解
    AC笔记 | 领扣Java容器脚手架
    Numpy文本读写：loadtxt，savetxt，genfromtxt
    k8s使用minio分布式集群作为存储--基础配置篇
    如何找到一个靠谱的房东：租房宝典
    66.【注解与反射】
    几何向量：向量到平面投影和LookAt
    vue路由之路由的两种模式
    【运维】永久关闭selinux不当，导致无法启动
    应广单片机（MCU单片机科普）
  • 原文地址：https://blog.csdn.net/m0_61933976/article/details/126683245