关于JS代码的执行顺序以及其他问题

最新推荐文章于 2023-02-19 18:51:59 发布

「已注销」

最新推荐文章于 2023-02-19 18:51:59 发布

阅读量227

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Y__J___/article/details/102652924

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

关于代码的执行顺序

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>关于代码的执行顺序</title>
	</head>
	<!-- load事件什么时候发生？页面全部元素加载完毕之后才会发生 -->
	<body onload="ready()">
		<script type="text/javascript">
			function ready(){
				document.getElementById("btn").onclick = function(){
					alert("hello js");
				}
			}
		</script>
		<input type="button" value="hello" id="btn" />
	</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..");
				}
			}
		</script>
		<input type="button" value="hello" id="btn"/>
	</body>
</html>

JS代码设置节点的属性

<!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" value="将文本框改为复选框" id="btn">
	</body>
</html>

JS代码捕捉回车键

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS代码捕捉回车键</title>
	</head>
	<body>
		<script type="text/javascript">
			window.onload = function(){
				var usernameElt = document.getElementById("username");
				// 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>

JS的void运算符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS的void运算符</title>
	</head>
	<body>
		<!-- 
			void运算符的语法：void（表达式）
			运算原理：执行表达式，但不返回任何结果。
				javascript：void（0）
				其中javascript：的作用就是告诉浏览器后面是JS代码，不可以省略
		-->
		首页顶部
		<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><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>
		<a href="javascript: void(0)" onclick="alert('test!')">超链接，保留原有状态</a>
		<br><br><br><br><br><br>
	</body>
</html>

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于JS代码的执行顺序以及其他问题

关于代码的执行顺序<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>关于代码的执行顺序</title> </head>  <body ...
复制链接

扫一扫