javascript中的事件

原创已于 2022-01-18 22:25:19 修改 · 342 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

于 2022-01-18 22:24:12 首次发布

javascript 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了JavaScript中的各种事件及其应用场景，包括页面加载事件、输入选择变化、焦点获取与失去、鼠标操作、键盘按键、表单提交及重置等，并通过实例展示了不同事件的触发条件和效果。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS中的常见事件</title>
		<style type="text/css">
			input {
				width:300px;
				border:1px solid black;	
			}
			#mouseDiv{
				border:1px solid black;
				background-color:aqua;
				 width:300px;
				 height:300px;
			}
		</style>
	</head>
	<body onload="console.log('页面加载完毕')">
		/**
		 * load事件不是页面加载过程中触发的，而是在页面中所有元素加载完毕之后才完成的。
		 */
		<script type="text/javascript">
			/**
			 * js中的常见事件要知道；
			 * 任何一个事件都有对应的时间句柄。时间句柄是在事件名称前添加on  就行
			 */
		</script>
		<select onchange="console.log('选项被修改')">//这里的打印输出只是为了能够进行显示，其实我们呢还有更大的用处。
			<option value ="">请选择您的学历</option>
			<option value ="gz">高</option>
			<option value ="dx">大学</option>
		</select>
		<br>
		测试失去焦点：<input type="text" onblur = "console.log('失去焦点')"/>
		<br>
		测试获取焦点：<input type="text" onfocus = "console.log('聚焦')" /> 
		<br>
		测试click事件：<input type="button" value="click事件" onclick = "console.log('单击')"/>
		<br>
		测试dbclic事件：<input type="button" value="dbclick事件" ondbclick = "console.log('双击')" />
		<br>
		测试keydown事件：<input type="text" onkeydown="console.log('keydown')" />
		<br>
		测试mouse相关的事件：
		<div id="mouseDiv" onmouseover="console.log('鼠标经过了')"
							onmousedown="console.log('鼠标按下乐')"
							onmousemove="console.log('鼠标移动了')"></div>
							<br>
		测试表单的重置和重置时间：
		<form action="" onsubmit="console.log('表单提交了')" onreset="console.log('表单重置了')">
			<input type="submit"  value="提交" />
			<input type="submit" value="重置"/>
		</form>
		
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			function say(){
				console.log("I know");
			}
		</script>
		/**
		 * 注册事件的第一种方式，在标签中使用时间事件句柄，在时间句柄的后面编写js代码，当事件发生之后，就会去调用这个句柄后面的函数。
		 ‘注册’事件中的句柄当时的这个代码被监听器调用。
		 say（）函数就成为回调函数。在页面打开的时候只会完成事件的绑定，当事件发生之后，监听器负责调用这种函数。
		 （在事件句柄的后面）
		 */
		<input type="button" value="hello jack" onclick="say()" />
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			window.onload = function(){
				var t1 = document.getElementById("n1");
				t1.onclick = function(){//我是个匿名函数.
					console.log("我知道了");
				}
				
				var t2 = document.getElementById("n2");
				t2.onclick = function(){
					console.log("就这一样吧");
				}
				
				document.getElementById("n2").onclick = function(){
					alert("爱是什么);
				}
			}
		</script>
		
		<input type="button"  id="n1" value="按钮1" />
		<input type="button" id="n2" value="按钮2" />
	</body>
</html>