原生js事件对象e简单例子1

最新推荐文章于 2023-06-10 17:28:29 发布

每一天，每一步

最新推荐文章于 2023-06-10 17:28:29 发布

阅读量181

点赞数

分类专栏： javaScript 文章标签： js javascript dom html5

本文链接：https://blog.csdn.net/u010234868/article/details/118423829

版权

javaScript 专栏收录该内容

135 篇文章 12 订阅

订阅专栏

这篇博客通过一个简单的HTML示例展示了如何使用JavaScript进行事件处理，包括点击、鼠标经过和离开事件的监听与响应。代码中定义了一个名为fn的函数，用于根据事件类型打印不同的消息。读者可以了解到如何在DOM元素上绑定事件处理函数并理解事件处理的基本原理。

摘要由CSDN通过智能技术生成

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body {
			margin: 0;
		}
		#box {
			width: 300px;
			height: 300px;
			background-color: pink;
			margin: 100px;
		}
	</style>
</head>
<body>
	<div id="box">
	</div>

	<script>
		var box = document.getElementById('box');
		// box.onclick = function (e) {
		// 	e = e || window.event;
		// 	// 获取事件的名称
		// 	console.log(e.type);
		// }


		box.onclick = fn;
		box.onmouseover = fn;
		box.onmouseout = fn;

		function fn (e) {
			e = e || window.event;
			switch (e.type) {
				case 'click':
					console.log('点击box');
					break;
				case 'mouseover':
					console.log('鼠标经过box');
					break;
				case 'mouseout':
					console.log('鼠标离开box');
					break;
			}
		}
		
	</script>
</body>
</html>

每一天，每一步

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js事件对象e简单例子1

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> body { margin: 0; } #box { width: 300px; height: 300px; background-color: pink; margin: 100px;.
复制链接

扫一扫

专栏目录