前端学习笔记三：JavaScript（3）事件驱动函数

最新推荐文章于 2022-08-13 10:04:22 发布

大一哟

最新推荐文章于 2022-08-13 10:04:22 发布

阅读量159

点赞数

分类专栏：学习笔记文章标签： javascript html

本文链接：https://blog.csdn.net/Reiuji_Utsuho/article/details/107524298

版权

学习笔记专栏收录该内容

33 篇文章 1 订阅

订阅专栏

这次有点短，就一段，不过挺重要的：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<script type="text/javascript">
			/*
			关于事件驱动函数：
				在和页面交互的过程钟所调用的函数被称之为事件驱动函数。
				此处的“事件”是指和页面交互的行为。例如鼠标点击某个按钮时(onclick)
				、鼠标浮动或离开某个区域时(onmouseover, onmouseout)、到文本框获取焦点和失去焦点时(onfocus, 
				onblur)等
				
				因此，可以通过document.getElementById()函数找到符合条件的标签节点。
				然后可以同事件驱动函数，给当前的按钮绑定一系列的操作，完成用户交互。
			*/
			function square(a){
				var Txt = document.getElementById("input_n");
				var Btn = document.getElementById("btn1");
				
				var result = Txt.value;
				result = result * result;
					
				document.writeln(Txt.value + "的平方是" + result);
			}
		</script>
	</head>
	<body>
		
		<div class="mui-input-row">
			输入数字来作平方（默认为1）：<input type="text" value="1" id="input_n">
			<button type="button" value="按钮" id="btn1" onclick="square()">提交</button>
		</div>
	</body>

运行结果：
在这里插入图片描述

大一哟

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端学习笔记三：JavaScript（3）事件驱动函数

这次有点短，就一段，不过挺重要的：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <script type="text/javascript"> /*
复制链接

扫一扫