096_JavaScript事件

最新推荐文章于 2023-09-15 13:37:29 发布

原创最新推荐文章于 2023-09-15 13:37:29 发布 · 163 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #web前端

JavaScript学习专栏收录该内容

105 篇文章

订阅专栏

本文介绍HTML与JavaScript事件的基础知识，包括如何使用HTML属性触发事件、JavaScript事件处理程序的添加方式及其实现的功能，如用户输入验证、响应用户操作等。

1. html事件

1.1. html事件可以是浏览器或用户做的某些事情。

1.2. 在html元素上添加事件属性来触发事件。

2. JavaScript事件

2.1. 通过JavaScript代码, html允许您向html元素添加事件处理程序。

2.2. 语法:

<element event='一些 JavaScript代码'>

2.3. 直接在html事件属性值中写JavaScript代码:

<button onclick='document.getElementById("demo").innerHTML="hello world";'>Click Me</button>

2.4. JavaScript代码通常有很多行。html事件属性调用JavaScript函数更为常见:

<div id='demo'>hello world</div>
<button onclick='myFunction(event)'>Click Me</button>

<script type="text/javascript">
	function myFunction(e) {
		document.getElementById("demo").innerHTML="你好世界";
	}
</script>

3. html事件和JavaScript事件

3.1. 实际上事件是在html元素上发生的, 也就是说html触发事件。

3.2. 事件的实际处理是在JavaScript代码中的, 我们认为JavaScript执行事件。

4. JavaScript事件能够做什么?

4.1. 事件处理程序可用于验证用户输入、用户动作和浏览器动作:

验证用户输入的表单数据。
当用户点击按钮时执行的动作。
每当页面加载完成应该做的事情。
当页面被关闭时应该做的事情。
等等

5. 例子

5.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>JavaScript事件</title>
		
	</head>
	<body>
		<div id='demo'>hello world</div>
		<button onclick='myFunction(event)'>Click Me</button>

		<script type="text/javascript">
			function myFunction(e) {
				document.getElementById("demo").innerHTML="你好世界";
			}
		</script>
	</body>
</html>

5.2. 效果图