javascript之事件

最新推荐文章于 2022-11-20 16:43:45 发布

背着吉他的蝙蝠女侠

最新推荐文章于 2022-11-20 16:43:45 发布

阅读量162

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/echokkk/article/details/78712137

版权

javascript 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

事件就是可以被javascript侦测到的行为；

事件一：点击事件（onclick）。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<button id="btn">点我试试</button>
	<script type="text/javascript">
		var btn = document.getElementById("btn");
		btn.onclick = function(){
			alert(1)
		}
	</script>
</body>
</html>

事件二：鼠标经过事件（onmouseover）。代码如下：

鼠标移出事件（onmouseout），直接把经过改为移出即可。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div {
			width: 200px;
			height: 200px;
			background-color: red;
		}
	</style>
</head>
<body>
	<div id="btn">点我试试</div>
	<script type="text/javascript">
		var btn = document.getElementById("btn");
		btn.onmouseover = function(){
			alert(1)
		}
	</script>
</body>
</html>

事件三：文本内容改变事件（onchange）。代码如下：当文本内容改变的时候，然后失焦，就会执行onchange内的函数。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		
	</style>
</head>
<body>
	<input type="text" value="改变试试" id="btn">
	<script type="text/javascript">
		var btn = document.getElementById("btn");
		btn.onchange = function(){
			console.log(1)
		}
	</script>
</body>
</html>

事件四：onselect文本框选中事件，demo代码和事件三一样，只是把onchange改变为onselect即可。

事件五：onfocus光标聚集事件，demo代码和事件三是一样的，只是把onchange改变为onfocus即可。

事件六：onblur移开光标事件，demo代码和事件三是一样的，只是把onchange改变为onblur即可。

事件七：onload网页加载事件，demo代码和事件三是一样的，只是把onchange改变为onload即可。

事件八：onunload关闭网页事件，demo代码和事件三是一样的，只是把onchange改变为onunload事件即可。