JavaScript事件与处理程序绑定(1)

最新推荐文章于 2022-04-10 10:21:01 发布

积沙成塔——

最新推荐文章于 2022-04-10 10:21:01 发布

阅读量168

点赞数 1

分类专栏： JavaScript基础

本文链接：https://blog.csdn.net/qq_45308912/article/details/121057841

版权

事件绑定 JavaScript HTML 事件处理程序 DOM操作

关键词由CSDN通过智能技术生成

JavaScript基础专栏收录该内容

78 篇文章 0 订阅

订阅专栏

1.事件与处理程序的绑定

1.一般可以使用两种方式将对象事件与处理程序代码进行绑定

第一种方式：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			var flag = 0;  //当做点击的标记
			function changeSize() {
				if(flag==0) {  //点击第一下的时候字体变大
					var obj= document.getElementById("text");
					obj.style.fontSize="30px";
					flag = 1;
				} else {		//点击第二下的时候字体变小
					var obj2 = document.getElementById("text");
					obj2.style.fontSize="16px";
					flag = 0;
				}
				
			}
		</script>
	</head>
	<body>
	//当单击段落时，将段落文本大小更改为30px
	 <p id="text" onclick="changeSize()">事件与处理程序</p>
	</body>
</html>

第二种方式：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
	//js代码要写在p标签的后面，因为写在前面就访问不到p标签id的text属性值
		 <p id="text">事件与处理程序</p>
		 <script>
		 			document.getElementById("text").onclick=function() {
		 			var obj= document.getElementById("text");
		 			obj.style.fontSize="30px";	
		 		}			
		 </script>
	</body>
</html>