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>