JS事件的分类与介绍

最新推荐文章于 2024-05-17 15:36:25 发布

邹向超

最新推荐文章于 2024-05-17 15:36:25 发布

阅读量1.9k

点赞数 2

本文链接：https://blog.csdn.net/kx0826/article/details/52797920

版权

JS事件的分类与介绍

前言：我是个新手，说的可能很浅，希望见谅！！

在说JS事件与其分类之前，我先了解下事件。什么是事件呢？通俗来说就是发生的事情。我理解的js事件是指：用户在执行某项操作所发生的事情。

事件的分类及其介绍

在JS中事件分为：鼠标事件，键盘事件和HTML事件。

鼠标事件：就是鼠标在点击的时候发生的事情。其中用到的代码有：onclick(鼠标点击的时候),ondblclick(鼠标双击的时候),onmousedown(鼠标按下的时候),onmouseout(鼠标从某元素中移开的时候),onmouseover(鼠标移入某元素),onmouseup(鼠标松开),onmousemove(鼠标移动的时候)，这些是鼠标左键的操作。oncontextmenu(这是鼠标右键操作，例如：就是我们的鼠标的右键操作)。上面这些也是常用的鼠标事件。

键盘事件：就是键盘某个键给按下或者按下后弹起后发生的事情。其中用到的代码有：onkeydown(键盘的某个按键按下),onkeypress(键盘的某个按键按下并按住不放),onkeyup(键盘的某个按键被松开)。

HTML事件：onload(页面加载后触发)，onabort(图形加载中断时触发)，onblur(元素失去焦点时触发)，onchange(用户改变文本框或者文本域的内容时触发)，onerror(加载文档或者图像时发生错误触发)，onfocus(元素获得焦点时触发)，onreset(重置按钮被点击时触发)，onresize(窗口或者框架的尺寸被调整时触发)，onselect(文本被选定时触发)，onsubmit(点击提交按钮时触发)，onunload(用户退出页面时触发)。

右边是表格形说明：

下面是一小段关于JS事件的代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box{background-color: white;}
			.active{background-color: red;}
			div{width:300px;height: 300px;background-color: red;}
		</style>
		<script type="text/javascript">
			window.οnlοad=function(){//页面加载		
				var oBox=document.getElementById('box');//获取ID为box的div
				aIinput=oBox.getElementsByTagName('input');//获取div中的按钮
				aDiv=oBox.getElementsByTagName('div');//获取box中的所有div
				for(var i=0;i<aIinput.length;i++)
				{
					aIinput[i].index=i;//创建个索引
					aIinput[i].οnclick=function(){//点击按钮的时候	
						for(var j=0;j<aIinput.length;j++)
						{
							aIinput[j].className='';//每次点击的时候清空样式
							aDiv[j].style.display='none';//每次点击按钮的时候让div的display属性为none
						}
						this.className='active';//给div添加active的样式
						aDiv[this.index].style.display='block';//让当前的div的display属性为block。
					};
				}
			};
		</script>
	</head>
	<body>
		<div id="box">
		<input type="button" name="" id="a" value="教育"  />
		<input type="button" name="" id="b" value="体育" />
		<input type="button" name="" id="c" value="娱乐" />
		<input type="button" name="" id="d" value="科技" />
		<div>1</div>
		<div style="display: none;">2</div>
		<div style="display: none;">3</div>
		<div style="display: none;">4</div>
		</div>
	</body>
</html>

邹向超

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
JS事件的分类与介绍

JS事件的分类与介绍前言：我是个新手，说的可能很浅，希望见谅！！在说JS事件与其分类之前，我先了解下事件。什么是事件呢？通俗来说就是发生的事情。我理解的js事件是指：用户在执行某项操作所发生的事情。事件的分类在JS中事件分为：鼠标事件，按键事件和HTML事件。鼠标事件：就是鼠标在点击的时候发生的事情。其中用到的代码有：o
复制链接

扫一扫