【JavaScript】第九节 HTML添加事件的方式

最新推荐文章于 2023-09-07 16:43:10 发布

景谦Nice

最新推荐文章于 2023-09-07 16:43:10 发布

阅读量215

点赞数

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

本文链接：https://blog.csdn.net/qq_43705275/article/details/103279564

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

方式一：直接在标签中添加属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>添加事件的第一种方式</title>
		<script type="text/javascript">
			function get_event(){
				alert('直接在标签中添加属性');
			}
		</script>
	</head>
	<body>
		<span onclick="get_event()">点这里触发事件</span>
	</body>
</html>

在页面中点击文字“点这里触发事件”会执行方法get_event()：
在这里插入图片描述

方式二：获取标签对象后添加属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>添加事件的第二种方式</title>
		
	</head>
	<body>
		<span id='two'>点这里触发事件</span>
		<script type="text/javascript">
			document.getElementById('two').onclick = function(){
				alert('获取标签对象后添加属性');
			};
		</script>
	</body>
</html>

在页面中点击文字“点这里触发事件”会执行方法：
在这里插入图片描述

方式三：获取标签对象后添加事件监听

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>添加事件的第三种方式</title>
		
	</head>
	<body>
		<span id='three'>点这里触发事件</span>
		<script type="text/javascript">
			document.getElementById('three').addEventListener('click',function(){
				alert('获取标签对象后添加事件监听');
			});
		</script>
	</body>
</html>

在页面中点击文字“点这里触发事件”会执行方法：
在这里插入图片描述

景谦Nice

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【JavaScript】第九节 HTML添加事件的方式

方式一：直接在标签中添加属性<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>添加事件的第一种方式</title> <script type="text/javascript"> function get_event(){...
复制链接

扫一扫

专栏目录