Javascript笔记03

最新推荐文章于 2024-09-25 14:00:00 发布

最爱琴女E

最新推荐文章于 2024-09-25 14:00:00 发布

阅读量139

点赞数

分类专栏： JavaScript 文章标签： javascript js

本文链接：https://blog.csdn.net/qwq_666/article/details/112428243

版权

JavaScript 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

常用事件、回调函数与注册事件的两种方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js的常用事件</title>
	</head>
	<body>
		<script type="text/javascript">
			/* 
				JS中的事件：
					blur失去焦点
					focus获得焦点
					
					click鼠标单击
					dblclick鼠标双击
					
					keydown键盘按下
					keyup键盘弹起
					
					mousedown鼠标按下
					mouseover鼠标经过
					mousemove鼠标移动
					mouseout鼠标离开
					mouseup鼠标弹起
					
					reset表单重置
					submit表单提交
					
					change下拉列表选中项改变，或文本框内容改变
					select文本被选定
					load页面加载完毕（整个HTML页面中所有的元素全部加载完毕之后发生）
			
			任何一个事件都会对应一个事件句柄，事件句柄是在事件前添加on。
			onXXX这个事件句柄出现在一个标签的属性位置上（事件句柄以属性的形式存在）
			 */
			//对于当前程序来说，sayHello函数被称为回调函数（callback函数）
			//回调函数的特点：自己把这个函数代码写出来，但是这个函数不是自己负责调用，由其他程序负责调用该函数
			function sayHello(){
				alert("hello js!");
			}
		</script>
		<!-- 注册事件的第一种方式，直接在标签中使用事件句柄 -->
		<input type="button" value="hello" onclick="sayHello()" />
		
		<input type="button" value="hello2" id="mybtn" />
		<input type="button" value="hello3" id="mybtn1" />
		<input type="button" value="hello4" id="mybtn2" />
		<script type="text/javascript">
			function doSome(){
				alert("do some!");
			}
			/* 
				第二种注册事件的方式，是使用纯js代码完成事件的注册
			 */
			//第一步：先获取这个按钮对象(document是全部小写，内置对象，可以直接用，document就代表整个HTML页面)
			var btnObj = document.getElementById("mybtn");
			//第二步：给按钮对象的onclick属性赋值
			btnObj.onclick = doSome;//注意：千万别加()，btnObj。onclick = doSome();这是错误的写法
									//这行代码的含义是，将回调函数doSome注册到click事件上
			
			var mybtn1 = document.getElementById("mybtn1");
			mybtn1.onclick = function(){//这个函数没有名字，叫做匿名函数，这个匿名函数也是一个回调函数
				alert("test.....");		//这个函数在页面打开的时候只是注册上，不会被调用，在click事件发生之后才会调用
			}
			
			document.getElementById("mybtn2").onclick = function(){
				alert("test2222222222222......");
			}
		</script>
	</body>
</html>

js代码达到执行顺序

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>关于js代码的执行顺序</title>
	</head>
	<!-- load事件在页面全部加载完毕之后才会发生 -->
	<body onload="ready()">
		<script type="text/javascript">
			/*
			//第一步：根据id获取节点对象
			var btn = document.getElementById("btn");//返回null（因为代码执行到此处的时候，id=“btn”的元素还没有加载到内存）
			//第二步：给节点对象绑定事件
			btn.onclick = function(){
				alert("hello js");
			}
			*/
		    function ready(){
				var btn = document.getElementById("btn");
				btn.onclick = function(){
					alert("hello js");
				}
			}
		</script>
		
		<input type="button" id="btn" value="hello" />
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>关于js代码的执行顺序</title>
	</head>
	<body>
		<script type="text/javascript">
			//页面加载的过程中，将a函数注册给了load事件
			//页面加载完毕之后，load事件发生了，此时执行回调函数a
			//回调函数a执行的过程中，把b函数注册给了id=“btn”的click事件
			//当id=“btn”的节点发生click事件之后，b函数被调用并执行
			window.onload = function(){//假设这个回调函数叫做a
				document.getElementById("btn").onclick = function(){//假设这个回调函数叫做b
					alert("hello js");
				}
			}
		</script>
		
		<input type="button" id="btn" value="hello" />
	</body>
</html>

将文本框变为复选框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js代码设置节点的属性</title>
	</head>
	<body>
		<script type="text/javascript">
			window.onload = function(){
				document.getElementById("btn").onclick = function(){
					var mytext = document.getElementById("mytext");
					//一个节点对象中只要有的属性都可以“.”
					mytext.type = "checkbox";
				}
			}
		</script>
		
		<input type="text" id="mytext" />
		
		<input type="button" id="btn" value="将文本框修改为复选框" />
	</body>
</html>

捕捉回车键

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>捕捉回车键</title>
	</head>
	<body>
		<script type="text/javascript">
			window.onload = function(){
				var usernameElt = document.getElementById("username");
				//回车键的键值是13
				//ESC键的键值是27
				/*
				usernameElt.onkeydown = function(event){
					//获取键值
					//对于键盘事件对象来说，都有keyCode属性用来获取键值
					alert(event.keyCode);
				}
				*/
			   usernameElt.onkeydown = function(event){
				   if(event.keyCode === 13){
					   alert("正在进行验证...");
				   }
			   }
			}
		</script>
		<input type="text" id="username" />
	</body>
</html>

void运算符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>void运算符</title>
	</head>
	<body>
		页面顶部<br><br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br><br><br><br>
		<!-- 
			void运算符的格式：void（表达式）
			运算原理：执行该表达式，但不返回任何结果
			其中javascript：作用是告诉浏览器后面的是一段js代码
			以下程序的javascript：是不能省略的
			
			void()这个括号里必须要有表达式，否则会语法错误
		 -->
		<!-- <a href="" οnclick="window.alert('test code')"> 这里返回的是空字符串(当前路径)-->
		<a href="javascript:void(0)" onclick="window.alert('test code')">
			既保留住超链接的样式，同时用户点击该超链接的时候执行一段js代码，但页面还不能跳转
		</a>
		<br><br><br>
	</body>
</html>

js的控制语句

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>控制语句</title>
	</head>
	<body>
		<script type="text/javascript">
			/* 
				if
				switch
				
				while
				do...while...
				
				for循环
				
				break
				continue
				
				for...in语句（了解）
				with语句（了解）
			 */
			
			//创建js数组
			var arr = [false,true,1,2,"abc",3.14];//js中数组元素的类型随意，元素的个数随意
			//遍历数组
			for(var i = 0; i < arr.length; i++){
				alert(arr[i]);
			}
			
			//for...in
			for(var i in arr){
				//alert(i);i是数组的下标
				alert(arr[i]);
			}
			
			//for..in语句可以遍历对象的属性
			User = function(username,password){
				this.username = username;
				this.password = password;
			}
			
			var u = new User("张三","444");
			alert(u.username + "," + u.password);
			alert(u["username"] + "," + u["password"]);
			
			for(var shuxingming in u){
				alert(u[shuxingming]);
			}
			
			alert(u.username);//张三
			alert(u.password);//444
			
			with(u){
				alert(username + "," + password);//张三，444
			}
		</script>
	</body>
</html>