JavaScript事件的分类和介绍

最新推荐文章于 2023-11-20 16:42:15 发布
最新推荐文章于 2023-11-20 16:42:15 发布
阅读量1.6k 收藏 5
点赞数 3
分类专栏： JavaScript 文章标签： WEB前端 javascript 事件使用方法 事件介绍 事件冒泡
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qinqingz/article/details/52790445
版权

1、关于事件 

         在我们使用JavaScript编写脚本语言时,会发现我们会常常用到各种事件,如简单的单击事件onclick (通过鼠标点击触发事件),   onkeydown(键盘事件 按下键盘上任意健值触发)等等, 通过对这些事件的设置,javascript可以触发网页中设置好的事件, 事件的触发可以是用户的行为,也可以是浏览器的行为 事件通常有这几种案例, 元素被点击时, 页面加载完后,元素被鼠标经过时, 或者HTML的input标签改变时 事件通常有以下几种.

2、HTML标签内联事件

         在学习JavaScript初始时,我们常用到HTML的内联属性(需要注意的是,这种方法尽量避免使用因为不利于维护修改 除非必须使用)

代码如下:

<inputtype="button"name="btn" id="btn"οnclick="alert('HTML内联属性')"value="按钮"/>                                    

//原理是在input标签中使用按钮button样式,并且在里面加入onclick(鼠标单击事件)通过点击按钮,页面加载后弹出alert里面的字符串. 

 

3、DOM属性绑定事件

         通过对页面元素、节点、标签、ID的获取,然后使用对应的事件.

代码如下:

<!DOCTYPE html>
<html>
        <head>
               <meta charset="UTF-8">
               <title>汐玬纱个人博客</title>
               <meta name="keywords" content="汐玬纱,个人博客" />
			   <meta name="description" content="这是我的博客网站" />
               <!--css部分-->
               <styletype="text/css">
                       *{margin: 0; padding: 0;}
                       #box{width: 100px;height: 100px;}
                </style>
               <!--js部分-->
               <scripttype="text/javascript">
                       window.οnlοad=function(){
                               var oBox=document.getElementById('box');
                              
                               oBox.οnmοuseοver=function (){
                                      alert('你经过了这个DIV盒子');
                               };
                       };
               </script>
        </head>
        <body>
               <!--body部分-->
               <div id="box"></div>
        </body>
</html>


4、常用的事件

 4.1、鼠标事件集合

onclick                         鼠标单击元素时触发                                              

ondbclick                     鼠标双击元素时触发                                              

onmouseover             鼠标经过元素时触发                                              

onmouseout               鼠标离开元素时触发                                              

onmousemove          鼠标在元素移动时触发                                                     

onmousedown          鼠标的按键按下时触发                                                     

onmouseup                鼠标的按键松开时触发                                                 

oncontextmenu         鼠标的右键打开上下文菜单时触发                      

onmouseenter            鼠标指针移动到元素上触发                                 

onmouseleave           鼠标指针移出元素时触发                                      

4.2、键盘事件集合

onkeydown                 任意键盘上的按键被按下时触发                           

onkeyup                     任意键盘上的按键被送开时触发                            

onkeypress                 任意键盘上的按键被按下并且松开时                   

 4.3、框架/对象（Frame/Object）事件

4.4、表单事件

4.5、剪贴板事件

4.6、打印事件

4.7、拖动事件

4.8、多媒体（Media）事件

4.9、动画事件

4.10、过渡事件

4.11、其他事件

4.12、目标事件对象

4.13、事件监听对象

4.14、文档事件对象

4.15、鼠标/键盘事件对象

4.16、鼠标/键盘事件对象

altKey                           触发时返回检测"Alt"健是否被按下                                 

button                           触发时返回当前哪个鼠标按键被按下                                      

clientX                          触发时返回当前事件鼠标的X轴的坐标值                      

clientY                          触发时返回当前事件鼠标的Y轴的坐标值                               

ctrlKey                          触发时返回当前Ctrl键是否被按下                                          

Location                       触发时返回按键在键盘上的位置                                          

charCode                     触发时返回onkeypress键值的字母代码                             

key                                触发时返回当前按键按下的标识符                                       

keyCode                       返回按下松开键盘按键的值,或按下/松开键盘事件的值     

which                            返回按下松开键盘按键的值,或按下/松开键盘事件的值          

metaKey                       返回当前事件被触发时,"meta"键是否被按下                       

relatedTarget               返回与事件的目标节点相关的节点                                 

screenX                        返回当某个事件被触发时，鼠标指针的水平坐标                 

screenY                        返回当某个事件被触发时，鼠标指针的垂直坐标                 

shiftKey                         返回当事件被触发时，"SHIFT"键是否被按下                 

initMouseEvent()        初始化鼠标事件对象的值                                                 

initKeyboardEvent()   初始化键盘事件对象的值                                                 

详细事件请访问:     HTML DOM 事件对象

事件的类型及介绍:JS事件类型及介绍    

今天,我在这里要讲的是关于键盘鼠标事件的一部份应用以及代码案例.

        首先,我要讲的是关于event对象, event对象表示事件当前的状态, 例如触发event对象的元素后,鼠标的位置及其状态,或者当前按下键盘上的键位等等.需要注意的是event对象只在发生的过程中有效. event的某些属性值对待定的事件有意义. 就像:fromElement 和toElement 属性只对onmouseover 和 onmouseout事件有意义.下面我们从event对象常用的获取当前鼠标的坐标值开始说,   首先我们需要知道获取鼠标当前坐标值的事件.

clientX(获取当前鼠标X轴的坐标值) 

clientY(获取当前鼠标Y轴的坐标值)

案例一,任意点击页面.任意位置弹出对话框

代码如下:

		<script type="text/javascript">
				//文档对象模型.鼠标单击时,执行右边的函数
				document.οnclick=function (){
					//弹出对话框
					alert('您点击了页面！');
				};
		</script>
以上代码能够实现在页面任意位置鼠标单击弹出对话框.

在做这个例子的时候,我使用过

document.body=function (){alert('你点击了当前页面！');};

但是我发现,在浏览器页面浏览时,我并没有得到想要的结果. 在苦苦思索后,我找到了原因, 我通过 文档对象 的主体body 内容部分.鼠标单击时,弹出 对话框. 但是,当前情况下

我的网页文件内,body是没有任何东西的,so 我的鼠标单击body弹出对话框无效,因为body内并没有任何元素时,(除非我设置body的高度,不然body的实际默认高度是为零的),一般

body的高度是我们在主体部分写的元素撑开的高度,而当前内容为空时,body的高度为零,所以我无论怎么点击页面,都不会执行我的js代码块.

tagName(标签名)   <之前我们常常使用这个函数getElementsByTagName 通过标签名获取元素>  .

随后我做了一系列修改 然后我使用( chilaNodes )弹出document的节点.  

代码如下:

				//文档对象模型.鼠标单击时,执行右边的函数
				document.οnclick=function (){
					//弹出对话框
					alert('您点击了页面！');
					alert(document.childNodes[0].tagName);
				};

需要注意的是childNodes兼容性不是那么完美,所以当下,我使用IE浏览器进行测试,  我们得了一个 ！ 叹号  然后我找到了网页页面文档  的文档类型<!DOCTYPE html>  由此可见,

 我们通过document 获取的节点是网页节点中的第一个节点 (也是最大的节点)  然后, 我再 用alert 弹出 childNodes[1] 然后我们 看到 页面加载完成后 , 弹出了HTML 我们再返回

网页中查看 节点可以看到 HTML 元素节点是除了 文档类型 ！DoCTYPE 之后的第二大 元素节点 . 从这里我们可以看出. document 包含了最大的 节点<!DOCTYPE html>因为我

们弹出它的第一个子节点时,得到了 <!DOCTYPE html> (非普通的元素节点是文档说明 文档的类型)可以看出 , document 它是一个隐性节点 在文档的 最外面 .包含着所有的页面

元素.  所以 我们通过document 点击页面任意位置时 (作用域最大) 所以能实现 通过点击document 弹出对话框.

 

案例二,点击页面任意 位置 弹出当前位置的X轴 Y轴 坐标

代码如下:

window.οnlοad=function (){
	document.οnclick=function (){
		//弹出当前页面的 X轴加Y轴的鼠标坐标值
	alert(event.clientX+','+event.clientY);
	};
};

但是我发现 , 这样写代码有兼容性问题 IE浏览器能获取 而火狐 谷歌浏览器 不兼容 火狐和谷歌浏览器的内核  下面我做一个处理浏览器兼容性 .

代码如下:

<span style="font-size:14px;">document.οnclick=function (ev){alert(ev.clientX+','+ev.clientY);};</span>

通过检测 这段代码的兼容性比之前好很多.兼容IE9以上的IE浏览器 兼容火狐 兼容谷歌  ,IE9兼容性已经很好了. 但是想完美兼容IE9以下还是不行,得继续做修改.兼容性处理。

做兼容处理的办法:用if  else 去判断在哪个浏览器为真true (真)   如果为真,浏览器兼容 就会执行以下代码块  否则就  弹出false(假 ) 执行else 的代码块 浏览器对此不兼容

				document.οnclick=function (ev){
					//如果满足ev为真
					if(ev){
						//弹出true真！
						alert(true);
					}
					//否则 不满足时
					else{
						//弹出false 假
						alert(false);
					}
				};
通过这段代码,我们还能对程序进行改进 
				document.οnclick=function (ev){
					//如果满足ev为真
					if(ev){
						//弹出在兼容火狐谷歌浏览器的代码块！
						alert(ev.clientX+','+ev.clientY);
					}
					//否则 不满足时弹出兼容IE浏览器的代码块
					else{
						//弹出false 假
						alert(event.clientX+','+event.clientY);
					}
				};
在IE、火狐、谷歌浏览器执行代码后、我们可以看到程序已经完美的兼容各版本的浏览器了  (处理兼容的另一种写法如下) 

				//处理兼容问题的第二种写法
				window.οnlοad=function (){
					document.οnclick=function (ev){
						
						//声明一个变量  使用当兼容ev(火狐、谷歌)或 event(IE)
						var oEvent=ev || event;
						//弹出当前代码块
						alert(oEvent.clientX+','+oEvent.clientY);
					};
				};
*需要注意的是  在第二种兼容性写法中, 我们用到了 逻辑运算符号, ||  与  让变量值等于右边 只要两边的条件满足其一的时候就使用任意值  (只要 有真true即真)

在点击时间的无参函数中, 我们必须加上ev (兼容非IE的写法中,浏览器是需要向形参传一个系统的参数过来的)  ev是形参  使得当前鼠标单击事件成为有参函数.

！在这里我不得不说事件冒泡(这是使用事件时尤为需要注意的事情)   以下我通过一个案例 更好的说明 什么是冒泡事件

css部分

		<style type="text/css">
			div{padding: 40px; cursor: pointer;}
			#box1{background: pink;}
			#box2{background: plum;}
			#box3{background: aqua;}
		</style>
HTML body部分 

	<body>
		<div id="box1">盒子一
			<div id="box2">盒子二
				<div id="box3">盒子三</div>
			</div>
		</div>
	</body>
js部分 

			window.οnlοad=function (){
				//声明变量        通过标签获取元素
				var aDiv=document.getElementsByTagName('div');
				//循环所有的div
				for(var i=0;i<aDiv.length;i++){
					//当 div任意一个被点击时
					aDiv[i].οnclick=function(){
						//弹出    当前  div的盒子内容
						alert(this.innerHTML);
					}
				}
我们会发现,我们点击最外面的大盒子时  会弹出盒子一  点击大盒子里面包着的第二个盒子时 会弹出 盒子二  点击最小的盒子的时候 会弹出盒子三   

其实,当我们点击第二个盒子就会发现,点击完毕后 弹出了两个值 盒子二 和 盒子一  当我们点击盒子三的时候, 返回了三个值 盒子三  盒子二 盒子一  从HTML中的代码中我们可以

看见 ,盒子属于层叠关系 . 大家这时候会想到  因为盒子 三 在最里面呀  这么弹出值, 也很正常 .(其实这就是冒泡事件！)

     


首先我们要理解 事件是客户端操作进行发生的事件驱动   即某个事件被用户 /浏览器触发 从而做出相应的动作

冒泡机制 ：相信大家都见过扑通的水里 冒泡 从最深处 慢慢的一个气泡往水面上冒在上身的过程中 ,我们可以看到 气泡经过不同深度层次的水  我们可以把水看成我们的文档结

构DOM树  这么气泡 就相当于我们的事件 被出发后 气泡从DOM树的最底 层 一层一层的往上直至(水面) DOM树的根节点.

显而易见 (时间冒泡通常会触发页面内所有的事件这并不是我们想要的结果)  因此我们要禁止事件冒泡

显示隐藏案例禁止冒泡代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>禁止冒泡</title>
		<style type="text/css">
			div{width: 100px; height: 100px; margin: 0 auto; background: aqua; border: 1px solid paleturquoise;}
		</style>
		<script type="text/javascript">
			window.οnlοad=function (){
				var oBtn=document.getElementById('btn');
				var oBox=document.getElementById('box');
				
				oBtn.οnclick=function (){
					if (oBox.style.display=='none') {
						oBox.style.display='block';
					} else{
						oBox.style.display='none';
					}
				};
				//点击document最大的文档对象 让盒子隐藏
				document.οnclick=function (){
					oBox.style.display='none';
				};
			};
		</script>
	</head>
	<body>
		<input type="button" name="btn" id="btn" value="按钮" />
		<div id="box" class="box"></div>
	</body>
</html>
通过以上代码,我们能实现普通的页面效果是 鼠标单击按钮时 让隐藏消息的盒子出现 通常是选择 选项 期间如果我们后悔了 通过点击盒子外面的任意一处 让盒子隐藏  

以上代码实现了 点击按钮实现盒子显示, 点击盒子外任意位置 让盒子隐藏  (但当我们 发现 点击按钮让盒子显示的时候 却发现 盒子不显示 ) 这就是冒泡事件 通过找到input按钮的元素节点 我们实现点击按钮实现 div盒子的隐藏显示 点击盒子外任意位置隐藏盒子 但是 现在代码不显示是因为冒泡事件 当按钮的单击事件被触发时,就像水滴有了一个气泡,这个气泡会一层一层往上 直至出现在水面  我们设置了通过按钮显示隐藏 div 通过点击document 隐藏div 按钮点击显示div被触发后 冒泡事件迅速的一层一层去往上走  经过document(页面的最大隐性节点水面)的鼠标单击事件时, 也顺带触发了document的隐藏事件.   (因此我们需要消除事件冒泡！)


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>禁止冒泡</title>
		<style type="text/css">
			div{width: 100px;display: none; height: 100px; margin: 0 auto; background: aqua; border: 1px solid paleturquoise;}
		</style>
		<script type="text/javascript">
			window.οnlοad=function (){
				var oBtn=document.getElementById('btn');
				var oBox=document.getElementById('box');
				
				oBtn.οnclick=function (ev){
					//兼容性处理  
					var iEvent=ev || event;
					
					if (oBox.style.display=='none') {
						oBox.style.display='block';
					} else{
						oBox.style.display='none';
					}
					
					//取消冒泡事件    当事件冒泡为真的时候 取消事件冒泡
					iEvent.cancelBubble=true;
				};
				//点击document最大的文档对象 让盒子隐藏
				document.οnclick=function (){
					oBox.style.display='none';
				};
			};
		</script>
	</head>
	<body>
		<input type="button" name="btn" id="btn" value="按钮" />
		<div id="box" class="box"></div>
	</body>
</html>


通过event对象 实现div盒子跟随鼠标移动效果

clientX(获取当前鼠标X轴的坐标值) 

clientY(获取当前鼠标Y轴的坐标值)

案例代码如下 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>div跟随鼠标</title>
		<style type="text/css">
			*{margin: 0; padding: 0;}
			#box{width: 100px; height: 100px; background: aqua; position: absolute;}
		</style>
		<script type="text/javascript">
			//文档对象  鼠标移动事件(只要元素内移动一像素就会触发) 
			document.οnmοusemοve=function (ev){//ev形参 ev (兼容非IE的写法中,浏览器是需要向形参传一个系统的参数) 
				//event兼容性处理  ev兼容火狐 谷歌  event兼容IE
				var oEvent=ev||event;
				//通过id找到元素盒子
				var oBox=document.getElementById('box');
				//盒子距离左边的值         等于获取当前鼠标的X轴坐标+像素
				oBox.style.left=oEvent.clientX-50+'px';
				//盒子距离头边的值         等于获取当前鼠标的Y轴坐标+像素
				oBox.style.top=oEvent.clientY-50+'px';
			};
		</script>
	</head>
	<body>
		<div id="box"></div>
	</body>
</html>
但是随后我们便发现了这样写的一个bug    鼠标随着浏览器滚动条滚动后  box div盒子无法继续再跟随鼠标了  因为 我们给予鼠标跟随   的是clientX和clientY浏览器 当前可视化界面窗口的值  而返回的鼠标坐标点是以左上角为零点  当页面向下滑动时隐藏的头部 和页面向右滚动 隐藏的左边  页面也需要加在里面. 因此我们对代码进行一个完善.

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>div跟随鼠标</title>
		<style type="text/css">
			*{margin: 0; padding: 0;}
			body{width: 2000px; height: 2000px;}
			#box{width: 100px; height: 100px; background: aqua; position: absolute;}
		</style>
		<script type="text/javascript">
			//文档对象  鼠标移动事件(只要元素内移动一像素就会触发) 
			document.οnmοusemοve=function (ev){//ev形参 ev (兼容非IE的写法中,浏览器是需要向形参传一个系统的参数) 
				//event兼容性处理  ev兼容火狐 谷歌  event兼容IE
				var oEvent=ev||event;
				//通过id找到元素盒子
				
				//scrollTop 兼容性处理                    兼容火狐 谷歌        或    兼容IE
				var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
				var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
				
				var oBox=document.getElementById('box');
				//盒子距离左边的值         等于获取当前鼠标的X轴坐标+像素
				oBox.style.left=oEvent.clientX+scrollTop-50+'px';
				//盒子距离头边的值         等于获取当前鼠标的Y轴坐标+像素
				oBox.style.top=oEvent.clientY+scrollLeft-50+'px';
			};
		</script>
	</head>
	<body>
		<div id="box"></div>
	</body>
</html>
通过案例 我们可以看到clientX和clientY 获取鼠标当前的坐标   这两个事件我们经常使用 由此我们可封装成一个函数 以便调用  封装函数中,我们加入了兼容火狐谷歌  IE 与 scrollTop和 scrollLeft的值   


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>div跟随鼠标</title>
		<style type="text/css">
			*{margin: 0; padding: 0;}
			body{width: 2000px; height: 2000px;}
			#box{width: 100px; height: 100px; background: aqua; position: absolute;}
		</style>
		<script type="text/javascript">
			//获取当前鼠标的坐标值
			function getPos(ev){//ev形参  是下面兼容处理后传过来的<span style="font-family: Arial, Helvetica, sans-serif;"><span style="color:#ff0000;">oEvent</span></span>
<span style="white-space: pre;">				</span><span style="color:#ff0000;">var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;           //兼容火狐谷歌 || 兼容IE
				var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;</span>
				//返回当前值
				return {x: <span style="color:#ff0000;">ev</span>.clientX+scrollLeft, y: ev.clientY+scrollTop};   <span style="color:#ff0000;">//josn的写法 存储数据</span>
			}                  //ev  表示传来的形参  oEvent
			document.οnmοusemοve=function (ev){
				var oEvent=ev||event;
				var oBox=document.getElementById('box');
				
				var pos=getPos(oEvent);
				oBox.style.left=pos.x-50+'px';
				oBox.style.top=pos.y-50+'px';
			};
		</script>
	</head>
	<body>
		<div id="box"></div>
	</body>
</html>

在这里面我们用到了json  

 json使用语法      var json{X:2,Y:4};   

循环只能用 for  in          for(var i in json){ };      

弹出json的值:alert(i+'='+json.X);               //写在for in 循环里面

i代表的是谁    X代表X的值   在这里面 i 代表这 json 里面的 X   而X则代表了X的值2.

关于json  代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			//json 存储了变量X 与 Y 之间用,逗号隔开
			var json={X:88,Y:99};
			for(var i in json){
				//i代表了json里面的变量    X代表了变量的值   使用for in 会依次弹出所有存储变量的值
				alert(i+','+json.X);
			}
		</script>
	</head>
	<body>
	</body>
</html>


N个DIV跟随鼠标案例: 


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
div {width:30px; height:30px; background:red; position:absolute; border-radius:50% ;}
div:nth-child(3n-1){background: palegreen;}
div:nth-child(3n-2){background: aquamarine;}
div:nth-child(3n){background: powderblue;}
</style>
<script>
function getPos(ev)
{	//兼容处理 scrollTop  documentElement兼容火狐谷歌   ||或     body 兼容IE 的scrollTop获取
	var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
	var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
	//返回值 数组json的写法 X  Y在里面是 变量  ev代表传回的形参 oEvent  oEvent.clientX+scrollLeft 鼠标当前的可视化界面的值加上 滚动条左边的距离
	return {x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop};
}
 //文档      鼠标移动一个像素时触发              形参
document.οnmοusemοve=function (ev)
{	//通过标签获取元素   通常使用这种方法获取了元素后  需要使用for 循环遍历到每一个标签元素上面
	var aDiv=document.getElementsByTagName('div');
	//兼容性处理      oEvent 赋值= ev兼容火狐 谷歌|| event兼容IE
	var oEvent=ev||event;
	//声明pos变量  将函数获取当前页面可视化 翻滚的头部左边的 鼠标值返回
	var pos=getPos(oEvent);
	
	//从最后一个DIV开始循坏     当i>0循环到了第一个时   再i-- <逆向循环>
	for(var i=aDiv.length-1;i>0;i--)<span style="color:#ff0000;">//当i等于零的时候就是鼠标停止移动了</span>
	{	//任意一个的div     等于   前面的一个div的距离左边的值减一-1代表前一个
		aDiv[i].style.left=aDiv[i-1].offsetLeft+'px';
		aDiv[i].style.top=aDiv[i-1].offsetTop+'px';
	}
	//循环完上面的所有div后<从后开始循环到前面>但是需要第一个div特别的跟着鼠标走
	//数组的循环都是从零开始 这里下标零等于是第一个div
	//第一个div距离左边的值等于json数据体的X轴的值加像素  下面同上
	aDiv[0].style.left=pos.x+'px';
	aDiv[0].style.top=pos.y+'px';
};
</script>
</head>
 
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>

鼠标事件都有个on在前面 onclick onmouseover 等等

接下的案例是利用event对象 使用键盘控制div移动   

键盘上每个按键都有一个健值,所以 通过这个健值 我们能达到通过键盘控制页面的元素

键盘事件:onkeydown  键盘按下 的时候 触发keyCode 弹出当前键盘 按键 键值

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>键盘健值</title>
<script>
//页面文档 按键按下触发事件 执行右边的函数  ev形参
document.οnkeydοwn=function (ev)
{	//event兼容性处理 ev兼容谷歌火狐 event兼容IE
	var oEvent=ev||event;
	//弹出 返回当前值  keyCode 
	alert(oEvent.keyCode);
};
</script>
</head>
 
<body>

</body>
</html>
以上代码执行后能够弹出当前按键的值 

利用键盘控制div的移动 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>键盘控制</title>
		<style type="text/css">
			#box{width: 100px; height: 100px; position: absolute; background: pink;}
		</style>
		<script type="text/javascript">
			//网页文档 键盘按下任意键触发 执行右边的函数
			document.οnkeydοwn=function (ev){
				//event兼容性处理 ev兼容火狐 谷歌 || event兼容IE
				var oEvent=ev||event;
				//通过ID获得元素
				var oBox=document.getElementById('box');
				//判断当返回的按键值是等于37时
				if (oEvent.keyCode==37) {
					//div盒子距离左边的值 等于盒子距离左边的值-100加像素 <因为向左边移动是负数>
					oBox.style.left=oBox.offsetLeft-100+'px';
				} 
				//当返回按下的减值是等于39时,
				else if(oEvent.keyCode==39){
					//让div盒子距离左边的值 向右移动100像素   <向右移动是正数>
					oBox.style.left=oBox.offsetLeft+100+'px';
				}
				//当返回的按键值是38时
				if (oEvent.keyCode==38) {
					//我们让盒子距离上边的距离 每次-100像素 向上是负数
					oBox.style.top=oBox.offsetTop-100+'px';
				} 
				//当返回的按键值是40时 代表我们按的是下标键
				else if(oEvent.keyCode==40){
					//让盒子距离上面的值每次加100  向下移动 是整数
					oBox.style.top=oBox.offsetTop+100+'px';
				}
			}
		</script>
	</head>
	<body>
		<div id="box"></div>
	</body>
</html>
执行以上代码后,我么能通过键盘上的上下左右按键控制盒子的移动

下面是通过回车键提交表单里面的留言  和通过ctrl键加Enter键提交留言

第一个通过回车提交留言

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>回车提交留言</title>
		<style type="text/css">
			*{margin: 0;padding: 0; font-size: 14px; color: #FF0000;}
			input{display: block; margin: 0 auto; width: 400px; height: 20px; background: aquamarine; border: 1px solid orangered;}
			textarea{display: block; background: #f5f5f5; margin: 0 auto; width: 400px; height: 200px;}
		</style>
		<script type="text/javascript">
			//网页文档内 键盘任意键按下执行 右边的函数  ev形参  向非IE浏览器返回一个值
			document.οnkeydοwn=function (ev){
				//兼容性处理 ev兼容火狐 谷歌 || event兼容IE浏览器
				var oEvent=ev||event;
				//通过IE获取元素
				var oTxt=document.getElementById('txt1');
				var oBox=document.getElementById('txt2');
				//当键盘按下的值是  13时
				if (oEvent.keyCode==13) {
					//让文本域的值 等于文本框的值 加换行 += 是 oBox.value=oBox.value+oTxt.value 保留原本的值加上现在提交的值 
					oBox.value+=oTxt.value+'\n';
					//每次提交完后 清空文本框的内容
					oTxt.value='';
				} 
			};
		</script>
	</head>
	<body>
		<input type="text" name="txt1" id="txt1"/>
		<textarea id="txt2"></textarea>
	</body>
</html>
只能按住Ctrl加Enter键 提交回复<js代码如下> 
		<script type="text/javascript">
			//网页文档内 键盘任意键按下执行 右边的函数  ev形参  向非IE浏览器返回一个值
			document.οnkeydοwn=function (ev){
				//兼容性处理 ev兼容火狐 谷歌 || event兼容IE浏览器
				var oEvent=ev||event;
				//通过IE获取元素
				var oTxt=document.getElementById('txt1');
				var oBox=document.getElementById('txt2');
				//当键盘按下的值是  13时
				if (oEvent.keyCode==13 && oEvent.<span style="color:#ff0000;">ctrlKey</span>) {  //&&与 满足两边的条件  才执行下面代码  ctrlKey <代表<span style="color:#3366ff;">Ctrl</span>键>
					//让文本域的值 等于文本框的值 加换行 += 是 oBox.value=oBox.value+oTxt.value 保留原本的值加上现在提交的值 
					oBox.value+=oTxt.value+'\n';
					//每次提交完后 清空文本框的内容
					oTxt.value='';
				} 
			};
		</script>

ctrlKey、 shiftKey、 altKey  三个事件 ctrlKey 代表 Ctrl键   shiftKey 代表 Shift键    altKey 代表 Alt键

秦卿
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript基础知识第五章---数组（含大量案例分析）
2401_84435152的博客
04-26 882
要求：请将 [‘关羽’, ‘张飞’, ‘马超’, ‘赵云’, ‘黄忠’, ‘刘备’, ‘姜维’];数组里的元素依次打印到控制台；代码演示如下：// 数组长度 数组名.lengthvar arr = [‘关羽’, ‘张飞’, ‘马超’, ‘赵云’, ‘黄忠’, ‘刘备’, ‘姜维’];i++) {
Javascript 事件
qq_42839746的博客
09-14 1120
JavaScript使我们有能力创建动态页面，网页中的每一个元素都可以产生某些触发JavaScript函数的事件。我们可以认为事件是可以被JavaScript侦测到的一种行为。
JavaScript经典案例大集合
03-07
该压缩包包含了8个经典案例文件，其中涉及到的案例多数比较经典，对于初学者来说，是熟悉掌握JS的好教程。
20个JavaScript开发案列（一）
终成大师的博客
02-17 4889
20个JavaScript开发案列（一）
JS的事件介绍
热门推荐
cnds123的专栏
09-29 1万+
JS事件，就是用户或浏览器本身的某种行为，一般是用户对页面的一些动作引起的，例如，单击某个链接或按钮、在文本框中输入文本、按下键盘上的某个按键、移动鼠标等等。当事件发生时，您可以使用 JavaScript 中的事件处理程序（也可称为事件监听器）来检测并执行某些特定的程序。JS（JavaScript）与HTML 之间的交互是通过事件（event）实现的，或者说，事件是JavaScript和DOM之间进行交互的桥梁。 一般情况下事件的名称都是以单词on开头的，例如点击事件 onclick、页面加载事件 onl
Javascript事件
qq_61483796的博客
09-03 814
JavaScript事件相关知识，及相关细节
JavaScript中的事件
NUT_fireless的博客
06-16 171
事件类型 定义 事件类型指的是文档或者浏览器窗口中发生的一些特定交互瞬间。我们可以通过侦听器（或者处理程序）来预定事件，以便事件发生的时候执行相应的代码。 事件类型(event type):事件类型是一个用来说明发生什么类型事件的字符串。像鼠标悬浮，按下键盘等。我们也可以把事件类型叫做事件名字，用特定的名字来标识所谈论的特定类型的事件。 事件目标(event target):事件目标是发生的事件或与之相关的对象。当讲事件时，我们必须同时指定类型和目标。像window上的load事件或者链接的click事件
JavaScript 事件
林夏天的博客
05-21 328
事件是与浏览器或文档交互的瞬间，如点击按钮，填写表格等，它是JS与HTML之间交互的桥梁。 （一）事件流 DOM是树形结构，如果同时给父子节点都绑定事件时，当触发子节点的时候，这两个事件的发生顺序如何决定? 这就涉及到事件流的概念，它描述的是页面中接受事件的顺序。 事件流有两种: 事件冒泡(Event Capturing): 是一种从下往上的传播方式。事件最开始由最具体的元素(文档中嵌套层次最深的那个节点接受, 也就是DOM最低层的子节点), 然后逐渐向上传播到最不具体的那个节点，也就是DOM中最高层的父
JavaScript键盘事件常见用法实例分析
10-17
主要介绍了JavaScript键盘事件常见用法,简单描述了javascript键盘事件的分类、功能,并结合实例形式给出了javascript响应键盘事件相关使用技巧,需要的朋友可以参考下
WEB页编程技巧──JavaScript事件的应用.pdf
最新发布
01-03
二、JavaScript事件分类 JavaScript事件可以分为九种，分别是： 1. Click事件：用户点击鼠标按钮时触发的事件。 2. Load事件：WEB页加载完成时触发的事件。 3. Mouseover事件：鼠标指针移到元素上时触发的事件。 4...
JavaScript模仿当当网首页剥离的36类商品分类JS菜单demo
05-19
在JavaScript编程领域中，创建交互式的用户界面是常见的任务之一，尤其在电商网站中，商品分类菜单是必不可少的组成部分。本示例中的“JavaScript模仿当当网首页剥离的36类商品分类JS菜单demo”旨在帮助开发者理解...
突发事件数据
02-07
JavaScript是一种广泛应用于Web开发的脚本语言，它允许开发者通过AJAX（异步JavaScript和XML）技术实现实时更新和交互，从而处理动态数据，包括突发事件数据。在实际应用中，可能需要使用JavaScript库如jQuery、...
使用Chrome调试JavaScript的断点设置和调试技巧
10-25
本文将详细介绍如何在Chrome中设置和使用JavaScript断点，以及相关调试功能。 首先，Chrome的SourcesPanel是调试JavaScript的主要工作区。在SourcesPanel的左侧，你可以看到页面加载的所有资源，按域名进行分类，...
JavaScript基础——JS简单案例
m0_68794863的博客
12-04 5363
JS基础案例
JavaScript事件
weixin_43466575的博客
04-10 535
1、事件概述 （1）事件 事件：可被理解为是JavaScript侦测到的行为。 举例：这些行为指的就是页面的加载、鼠标单击页面、鼠标滑过某个区域等。 （2）事件处理程序 事件处理程序：指的就是JavaScript为响应用户行为所执行的程序代码。 举例：用户单击button按钮，这个行为就会被JavaScript中的click事件侦测到；然后让其自动执行，为click事件编写的程序代码，如在控制台输出“按钮被单击”。 （3）事件驱动式 事件驱动式：是指在Web页面中JavaScript的事件，侦测到的用户行为
JS事件汇总
von_ming的博客
06-29 4648
1. js事件 1.1 onclick 点击事件 1.2 onload 用户进入某个页面的时候触发（onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。）
20个JavaScript开发案列（二）
终成大师的博客
02-19 1932
20个JavaScript开发案列(二)
JavaScript中的事件类型
Blueskyzhw的博客
11-20 1108
1. 鼠标事件（Mouse Events）：包括点击、双击、鼠标移入移出、鼠标按下释放等。2. 键盘事件（Keyboard Events）：包括按键按下、按键释放、按键组合等。6. 窗口事件（Window Events）：包括窗口打开、窗口关闭、窗口刷新等。5. 触摸事件（Touch Events）：包括触摸开始、触摸移动、触摸结束等。4. 焦点事件（Focus Events）：包括元素获得焦点、元素失去焦点等。3. 表单事件（Form Events）：包括表单提交、表单重置等。
常见的事件
weixin_39427688的博客
04-17 517
常见的事件： 1. 点击事件： 1. onclick：单击事件 2. ondblclick：双击事件 2. 焦点事件 1. onblur：失去焦点 2. onfocus:元素获得焦点。 3. 加载事件： 1. onload：一张页面或一幅图像完成加载。 4. 鼠标事件： ...
【JavaScript源代码】JavaScript中BOM和DOM详解.docx
12-29
"这篇文档详细介绍了JavaScript中的BOM（浏览器对象模型）和DOM（文档对象模型）。BOM允许JavaScript与浏览器交互，而DOM则提供了一种结构化的表示HTML或XML文档的方法，使得JavaScript可以访问和操作文档内容。" ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值