隐藏在按钮后面的真实真相----JavaScript事件

最新推荐文章于 2024-07-12 16:27:40 发布

工程人永远在路上

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量107

点赞数

文章标签： javascript html html5

本文链接：https://blog.csdn.net/the_Milky/article/details/120180865

版权

JavaScript事件

HTML事件的实例

HTML 网页完成加载
HTML 输入字段被修改
HTML 按钮被点击

JavaScript事件的尝试实例

运行后：
在这里插入图片描述
点击“时间是？”后：

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>JavaScript事件</title>
		<body>
			<h1>JavaScript事件</h1>
			<p id="demo"></p>
			<button onclick="document.getElementById('demo').innerHTML=Date()">时间是？</button>
		</body>
	</head>
</html>

使用this.innerHTML改变自身元素的内容

运行后：
在这里插入图片描述
点击“时间是？”后：

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>JavaScript事件</title>
		<body>
			<h1>JavaScript事件</h1>
			<button onclick="this.innerHTML=Date()">时间是？</button>
		</body>
	</head>
</html>

使用函数调用的方式进行时间的输出

运行后
在这里插入图片描述
点击后：

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>JavaScript事件</title>
		<body>
			<p>点击按钮来显示日期</p>
			<button onclick="displayDate()">时间是？</button>
			<script>
				function displayDate(){
					document.getElementById("demo").innerHTML=Date();
				}
			</script>
			<p id="demo"></p>
		</body>
	</head>
</html>

JavaScript能做什么？

事件处理程序可用于处理、验证用户输入、用户动作和浏览器动作：
●每当页面加载时应该做的事情
●当页面被关闭时应该做的事情
●当用户点击按钮时应该被执行的动作
●当用户输入数据时应该被验证的内容
●等等
让 JavaScript 处理事件的不同方法有很多：
●HTML 事件属性可执行 JavaScript 代码
●HTML 事件属性能够调用 JavaScript 函数
●您能够向 HTML 元素分配自己的事件处理函数
●您能够阻止事件被发送或被处理
●等等

工程人永远在路上

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
隐藏在按钮后面的真实真相----JavaScript事件

JavaScript事件HTML事件的实例HTML 网页完成加载HTML 输入字段被修改HTML 按钮被点击JavaScript事件的尝试实例运行后：点击“时间是？”后：代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>JavaScript事件</title> <body> <h1&gt
复制链接

扫一扫