JS事件

兔子没钱

于 2021-02-18 14:07:05 发布

阅读量89

点赞数

文章标签： JavaScript 事件绑定图片切换 DOM操作 HTML

本文链接：https://blog.csdn.net/qq_45273160/article/details/113845843

版权

某些组件执行了某些操作后，会触发某些代码的执行

JS常用事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<img src="img/JS常用事件.png" id="img1"/>
		<br />
		<!--事件的绑定方式一-->
		<!--<button id="up" onclick="up()">上一张</button>
		<button id="down" onclick="down()">下一张</button>-->
		<!--事件的绑定方式二-->
		<button id="up">上一张</button>
		<button id="down">下一张</button>
	</body>
	<script type="text/javascript">
		// 显示第一张图片
		function up(){
			var img1 = document.getElementById("img1");
			img1.setAttribute("src","img/JS常用事件.png");
		}
		function down(){
			var img1 = document.getElementById("img1");
			img1.setAttribute("src","img/QQ截图20210218005113.png");
		}
		
		//为上一张按钮绑定单击事件
		var upbtn = document.getElementById("up");
		upbtn.onclick = up;
		var downbtn = document.getElementById("down");
		downbtn.onclick = down;
		
	</script>
</html>