JavaScript ---[事件,Event对象]

Posted 小智RE0

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript ---[事件,Event对象]相关的知识,希望对你有一定的参考价值。


事件


为需要处理的事件编写相应的事件处理程序。要理解事件驱动和程序,就需要与非事件驱动的程序进行比较。实际上,现代的程序大多是事件驱动的,比如多线程的程序,肯定是事件驱动的。早期则存在许多非事件驱动的程序,这样的程序,在需要等待某个条件触发时,会不断地检查这个条件,直到条件满足,这是很浪费cpu时间的。而事件驱动的程序,则有机会释放cpu从而进入睡眠态(注意是有机会,当然程序也可自行决定不释放cpu),当事件触发时被操作系统唤醒,这样就能更加有效地使用cpu.

就是对用户的行为(例如,点击鼠标,按下键盘)进行响应.

常用的事件

事件注释
onclick鼠标左键点击;
ondblclick鼠标左键双击;
onfocus标签获得焦点(聚焦);(例如输入型的标签,在第一次进入时触发;在标签内再点击无效;移出后再进入才会第二次触发)
onblur标签失去焦点(失焦); (例如输入型的标签;然后在焦点移出时触发)
onmouseover鼠标被移到某标签之上;(鼠标悬浮事件)
onmouseout鼠标从某标签移开;
onmousedown鼠标按下标签
onload在网页加载完毕后自动触发相应的的事件处理程序;(一般写在body标签内;)
onchange当前标签失去焦点并且标签的内容发生改变时触发事件.
Onkeydown键盘按下
Onkeyup键盘抬起

案例练习:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
		//案例
		//在这里写函数;
		function test1(){
			console.log("鼠标点击了");
		}
		function test2(){
			console.log("鼠标双击了");
		}
		function test3(){
			console.log("标签获得焦点");
		}
		function test4(){
			console.log("标签失去焦点");
		}
		function test5(){
			console.log("移入该标签");
		}
		function test6(){
			console.log("移出该标签");
		}
		function test7(){
			console.log("该标签失去焦点且内容被改变");
		}
		function test8(){
			console.log("键盘按下时触发");
		}
		function test9(){
			console.log("键盘抬起时触发");
		}
		</script>
	</head>
	<body>
		<!-- 使用按钮标签演示鼠标的点击和双击;左键点击按钮1时就会触发点击事件;双击按钮2时就会触发按钮的双击事件 -->
		<input type="button" onclick="test1()" value="点击该按钮1"/> <hr/> 
		<input type="button" ondblclick="test2()" value="双击该按钮2"/> <hr/>
		<!-- 使用文本框标签演示标签的焦点获得与失去 -->
		<input type="text" onfocus="test3()" onblur="test4()" /><hr/>
		<!-- 使用块级标签演示移入移出标签效果 -->
		<div onmouseover="test5()" onmouseout="test6()" style="width: 100px; background-color: chartreuse;">块标签</div>
		<!-- 使用文本框演示标签失去焦点且内容被改变; 当文本框失去焦点且文本框的内容被改变就会触发; -->
		<input type="text" onchange="test7()"  /> <hr/>
		<!-- 使用文本框演示键盘按下和抬起的事件;可以试着长按键盘某个键位;键盘按下事件就一直被执行;一旦松开那个键位就触发键盘抬起事件; -->
		<input type="text" Onkeydown="test8()"  Onkeyup="test9()"  /> <hr/>
	</body>
</html>

在这里插入图片描述



Event对象


在学习了鼠标或者键盘事件后;还需要为这些触发事件计算好预设位置;
Event 对象代表事件的状态,比如键盘按键的键位、鼠标的位置。
浏览器上端横向为X轴,左端竖向为y轴.

类型注释
type可获得被触发的事件类型
button被点击的鼠标键位( 0:左键 ,1:滚轮;2:右键)
altKey按下alt键位返回true;其他键返回false
ctrlKey按下ctrl键位返回true;其他键返回false
shiftKey按下shift键位返回true;其他键返回false
keyCode返回被按下的键位编码;注意;返回的是编码值
offsetX鼠标在当前标签内的X轴
offsetY鼠标在当前标签内的Y轴
clientX鼠标在浏览器内部X轴
clientY鼠标在浏览器内部Y轴
screenX鼠标在显示器内的X轴
screenY鼠标在显示器内的Y轴

键位类型以及事件类型案例:
type和button

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
          //写一个函数统计鼠标的键位;
		  function test(a){
			  console.log(a.button);//获得被点击的键位(0:左键,1:滚轮,2:右键)
			  console.log(a.type);//获得事件类型
		  }
		</script>
	</head>
	<body>
		<!-- 使用鼠标按下按钮进行测试 -->
		<input type="button"  value="这是按钮"   onmousedown="test(event)"  />
	</body>
</html>

效果:

在这里插入图片描述


坐标位置案例:

offsetX 鼠标在当前标签内的X轴
offsetY 鼠标在当前标签内的Y轴
clientX 鼠标在浏览器内部X轴
clientY 鼠标在浏览器内部Y轴
screenX 鼠标在显示器内的X轴
screenY 鼠标在显示器内的Y轴

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			写一个函数统计鼠标的位置;
		  function test(a){
			  console.log("鼠标在当前标签内的X轴位置:"+a.offsetX+"->Y轴位置:"+a.offsetY);
			  console.log("鼠标在当前浏览器的X轴位置:"+a.clientX+"->Y轴位置:"+a.clientY);
			  console.log("鼠标在当前显示器内的X轴位置:"+a.screenX+"->Y轴位置:"+a.screenY);
		  }
		</script>
	</head>
	<body>
		<!-- 使用块级标签进行鼠标XY轴的测试; -->
		<div style="width: 200px; height: 150px; background-color: chartreuse;" onmousedown="test(event)">块级标签</div>
	</body>
</html>

效果:

在这里插入图片描述


键盘事件案例

altKey 按下alt键位返回true
ctrlKey 按下ctrl键位返回true
shiftKey 按下shift键位返回true
keyCode 返回被按下的键位编码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function test0(a){
				console.log(a.keyCode);//获取按下的键位编码;
			}
			function test1(b){
				console.log(b.altKey);//按下alt键就返回true;按其他键返回false;
			}
			function test2(c){
				console.log(c.shiftKey);//按下shift键就返回true;按其他键返回false;
			}
			function test3(d){
				console.log(d.ctrlKey);//按下Ctrl键就返回true;按其他键就返回false;
			}
		</script>
	</head>
	<body>
		<!-- 使用文本框进行键盘事件测试 -->
		<input type="text"  onkeydown="test0(event)"/> <hr/>
		<input type="text"  onkeydown="test1(event)"/><hr/>
		<input type="text"  onkeydown="test2(event)"/><hr/>
		<input type="text"  onkeydown="test3(event)"/>
	</body>
</html>

效果:

在这里插入图片描述


以上是关于JavaScript ---[事件,Event对象]的主要内容,如果未能解决你的问题,请参考以下文章

javascript JavaScript isset()等效: - JavaScript

JavaScript 使用JavaScript更改CSS(JavaScript)

JavaScript之基础-1 JavaScript(概述基础语法)

前端基础-JavaScript的基本概述和语法

JavaScript

JavaScript