onblur事件怎么触发_[网页编程]-10 JavaScript event事件

最新推荐文章于 2024-05-31 13:53:36 发布

weixin_39906114

最新推荐文章于 2024-05-31 13:53:36 发布

阅读量1.2k

点赞数 1

文章标签： onblur事件怎么触发 onchange事件触发不了 qgraphicsitem鼠标移动事件阻塞 select onchange事件触发不了局部页面关闭触发事件

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

常用操作:

单击事件: 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>