函数——事件驱动函数

最新推荐文章于 2022-11-21 11:28:58 发布

白日梦工厂厂长

最新推荐文章于 2022-11-21 11:28:58 发布

阅读量345

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_42572029/article/details/107313373

版权

什么是事件驱动函数？
在和页面交互的过程中所调用的函数，该函数被称之为事件驱动函数
什么是事件？
和页面交互的行为称之为事件。比如：鼠标点击某个按钮时(onclick)、鼠标浮动或离开到某个区域时（onmouseover、onmouseout）、文本框获取焦点和失去焦点时（onfocus、onblur）等
我们可以通过document.getElementById找到符合条件的标签节点。然后我们可以同事件驱动函数，给当前的按钮绑定一系列的操作。完成用户交互。

<body>
	<input type="button" value="按钮" id="btn">
</body>
<script>
	var oBtn = document.getElementById("btn");
	alert(oBtn);
</script>

【注】这种写法一般不用，一般情况下，我们标签中script标签写在head

<head>
	<meta charset="utf-8">
	<title></title>
	<script>
	window.onload = function(){ //写在这里的代码，在页面加载完成以后执行
		var oBtn = document.getElementById("btn");
		alert(oBtn);
	}
	</script>
</head>
<body>
	<input type="button" value="按钮" id="btn">
</body>

接下来给按钮添加事件驱动函数

<head>
	<meta charset="utf-8">
	<title></title>
	<script>
	window.onload = function(){ 
		var oBtn = document.getElementById("btn");
		//单击onclick，这个函数是在按钮被点击以后触发的
		oBtn.onclick = function(){
		alert("单击");
		}
	}
	</script>
</head>
<body>
	<input type="button" value="按钮" id="btn">
</body>

点击清除文本

<head>
	<meta charset="utf-8">
	<title></title>
	<script>
		window.onload = function(){
			var oBtn = document.getElementById("btn");
			var oTxt = document.getElementById("txt");
			//给按钮添加事件驱动函数
			oBtn.onclick = function(){
				//要将文本的内容清空
				oTxt.value = "";
				/*
				//输出文本中的内容
				alert(oTxt.value);
				//修改文本中的内容
				oTxt.value = "修改后的文本";
				*/
			}
		}
	</script>
</head>
<body>
	<input type="text" value="默认的文字" id="txt">
	<input type="button" value="清空" id="btn">
</body>

白日梦工厂厂长

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
函数——事件驱动函数

什么是事件驱动函数？在和页面交互的过程中所调用的函数，该函数被称之为事件驱动函数什么是事件？和页面交互的行为称之为事件。比如：鼠标点击某个按钮时(onclick)、鼠标浮动或离开到某个区域时（onmouseover、onmouseout）、文本框获取焦点和失去焦点时（onfocus、onblur）等我们可以通过document.getElementById找到符合条件的标签节点。然后我们可以同事件驱动函数，给当前的按钮绑定一系列的操作。完成用户交互。<body> <input
复制链接

扫一扫