[网页编程]-10 JavaScript event事件

prtyaa 2023-12-27 16:06:02  65612

分类专栏：资讯

满足某些条件就会被触发例如单击

常用操作:

单击事件: onclick 最常用
双击事件: ondblclick
获得焦点事件: onfocus
失去焦点事件: onblur
鼠标移动事件: onmousemove
鼠标离开事件: onmouseout
鼠标抬起事件: onmouseover
键盘抬起事件: onkeyup
页面加载事件: onload

要一个操作触发多个事件只需要在事件中以分号隔开即可

<input type="button" name="" id="" value="单击事件"  
onclick="testdanji();testsuanji()"/>

API列表

单击事件(最常用)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function test1(){
				alert("单击事件被单击触发执行")
			}
			
			
		</script>
	</head>
	<body>
		
		<!-- 单击事件  最常用-->
<input type="button" name="" id="" value="单击事件"  onclick="test1()"/>
		
		
	</body>
</html>

双击事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
		
			function testsuanji(){
				alert("双击事件被双击触发执行了")
			}
			
		</script>
	</head>
	<body>
	
		<!-- 双击事件  -->
<input type="button" name="" id="" value="双击事件" ondblclick="testsuanji()"/>
	</body>
</html>

鼠标事件前两个一般是结合淘宝的商品图片放大功能来使用,放上去的时候就会弹出淘宝的商品图片的局部放大

鼠标事件 (放上)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function testmouse1(){
				alert("鼠标事件被鼠标放上触发执行")
			}
			
		</script>
	</head>
	<body>
		
		<!-- 鼠标事件 -->
<div style="width: 300px; height: 300px; background-color: red;"
 onmouseover="testmouse1()"></div><br><br><br>
		
	</body>
</html>

鼠标事件(离开)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function testmouse2(){
				alert("鼠标事件被鼠标移出触发执行")
			}
			
		</script>
	</head>
	<body>

		<!-- 鼠标事件 离开 -->
<div style="width: 200px; height: 200px; background-color: red;"
 onmouseout="testmouse2()"></div>
	</body>
</html>

鼠标事件(移动)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			
			function testmouse3(){
				console.log("鼠标事件被鼠标移动触发了")
			}
			
		</script>
	</head>
	<body>

		<!-- 鼠标事件 移动 -->
<div style="width: 200px;height: 200px; background-color: red;" 
onmousemove="testmouse3()"></div>
	</body>
</html>

键盘事件(弹起)

应用场景:1,百度搜索框配合ajax的时候可以在输入相应文字内容的时候再库中检索相应词条并且成列出来供用户选择

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function testkeyb1(){
				alert("键盘事件被键盘弹起触发了")
			}
		</script>
	</head>
	<body>
		
		<!-- 键盘事件 键盘弹起 -->
<input type="text" name="" id="" value="" onkeyup="testkeyb1()" />
		
	</body>
</html>

键盘事件(按下)

个人心得:觉得可以用于用户输入相应信息的时候提示用户先关条款的条约,比如注册但是一般小公司是不会这么干的

但是是这么用的:

1,百度搜索框配合ajax的时候可以在输入相应文字内容的时候再库中检索相应词条并且成列出来供用户选择

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			
			function testkeyb2(){
				alert("键盘事件被键盘按下触发了")
			}
		</script>
	</head>
	<body>
		<!-- 键盘事件 键盘按下 -->
<input type="text" name="" id="" value="" onkeydown="testkeyb2()" />
	</body>
</html>

获取焦点事件

失去焦点偷个懒: onblur

失去焦点一般会配合ajax做表单校验

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			
			function testjiaodian(){
				console.log("焦点被获取了")
			}
			
		</script>
	</head>
	<body>
		<!-- 获取焦点事件 -->
<input type="text" name="" id="" value="" onfocus="testjiaodian()"/>
	</body>
</html>

内容改变

onchange

应用场景多半是提示用户内容已经得到改变,提示用户对内容进行校验

<body > 标签中

onload:页面加载完成后就会进行操作

应用场景:一般都那种小黄网加载完成后进行弹窗或者是一些正规网站提示用户登录使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<script type="text/javascript">
		function demo1(){
			alert("事件被执行了")
		}
		function demo2(){
		//	alert("页面加载完成")
			
		}
	</script>
	</head>
	<body onload="demo2()" >
		<!-- 单击事件 -->
		<input type="button" name="" id="" value="单击操作" onclick="demo1()" /><br><br><br>
		<!-- 双击事件 -->
		<input type="button" name="" id="" value="双击事件" ondblclick="demo1()" /><br><br><br>
		<!-- 鼠标事件 鼠标放入执行 -->
		<!-- <div style="width: 300px; height: 300px; background-color: aqua; " onmouseover="demo1()"> -->
		<!-- 鼠标事件 鼠标移出执行 -->	
		<!-- <div style="width: 300px; height: 300px; background-color: aqua; " onmouseout="demo1()">  -->
		<!-- 鼠标事件 鼠标移动 -->
		<!--<div style="width: 300px; height: 300px; background-color: aqua; " onmousemove="demo1()">  -->
		<!-- 键盘事件 弹起事件 -->
		<input type="text" id="" value="" onkeyup="demo1()" /><br><br><br>
		<!-- 焦点事件 获得焦点 用于配合ajax做查询-->
		<input type="text" id="" value="" onfocus="demo1()"/><br><br><br>
		<!-- 焦点事件 失去焦点 用于表单校验 -->
		<input type="text" id="" value="" onblur="demo1()"/><br><br><br>
		<!-- 焦点事件 改变事件 用于表单校验 -->
		<input type="text" id="" value="" onchange="demo1()"/><br><br><br>
		<!-- 同时执行多个事件 -->
		<input type="button" name="" id="" value="单击操作" onclick="demo1();demo2() " /><br><br><br>
		</div>
	</body>
</html>

网站声明：如果转载，请联系本站管理员。否则一切后果自行承担。

本文链接：https://www.xckfsq.com/news/show.html?id=31540

赞同 0

评论 0 条

[网页编程]-14 HTML5 其他标签 2023-12-27 65647 浏览
到此为止所有的HTML级HTML5中,适合且应该我们知道的内容全部结束了,因为我们是后端为主的程序员,所以不需要心有猛虎细嗅蔷薇,我们只需要知道且会使用简单的前端页面的代码及标签即可,当然,心里有全栈工程师的梦想的程序员,肯定会努力学习更多的内容,所以就把完整的教程放在这里,方便大家查阅学习HTML5教程_w3cschoolwww.w3cschool.cn/html5/
[网页编程]-07 图片标签 2023-12-27 66528 浏览
图片标签多用于图片的插入,一般是有三种方式来连接图片参考代码
[网页编程]-08 框架标签 iframe 2023-12-27 67199 浏览
简单的来说,就是给网页做布局一个网页引入嵌套其他的网页例如我们的w3cSchool就是一个网页中引入了3个不同的网页(这里是类似哈,不是说这里就是用iframe)示例代码
- [网页编程]-09 框架标签frameset 及frame 2023-12-27 64605 浏览
  用这个标签的时候就是要先去body标签这个框架标签现在用得少,主要是移动端显示的画面差,所以用的极少参考代码
- [网页编程]-10 框架标签 div 2023-12-27 64025 浏览
  div用于对网页模块化划分div标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
  是一个块级元素。这意味着它的内容自动地开始一个新行大致上可以这样理解将一个网页进行这样划分,变成模块,然后在做编辑和布局也就是把网页划成多个格子,方便我们在每个格子里操作这里是需要用CSS的,如果不懂的话,只要理解下面的代码就可以了邮箱:
  年龄:
  
  添加我为好友，拉您入交流群！
  
  请使用微信扫一扫!