js中的所谓的事件类型
- 鼠标事件
- 表单事件
- 键盘事件
- 系统事件
提示:
博主:章飞_906285288
博客地址:http://blog.csdn.net/qq_29924041
鼠标事件
可以想象一下, 我们平时在使用鼠标的时候都是有哪些操作的,单击?双击?移动?亦或者按下,抬起,移入,移出等等一系列的事件,下面就主要针对鼠标的事件进行一点点小测试
事件类型 | 相关函数 |
---|---|
点击事件 | onclick |
移入/移出 | onmouseover/onmouseout |
移入/移出 | onmouseenter/onmouseleave |
双击事件 | ondbclick |
鼠标按下事件 | onmousedown |
鼠标弹起事件 | onmousedown |
鼠标移动事件 | onmousemove |
鼠标抬起事件 | onmouseup |
上面主要有两个需要注意的地方,一个就是ondbclick,是鼠标双击事件,还有鼠标的移入移出是有两个对称函数的,一个就onmouseenter/onmouseleave,另外一个就是onmouseover和onmouseout,他们的使用都是对称的。
代码如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
<meta name="Generator" content="EditPlus®"> <!--编辑器的名称-->
<meta name="Author" content="作者是谁">
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述和简介">
<style type="text/css">
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
ul,ol{margin: 0; list-style: none; padding: 0;}
a{ text-decoration: none; }
*{ margin: 0; padding: 0; }
.main{width: 700px;margin: 50px auto;box-shadow: 0 0 10px 0px blue;padding: 10px}
p{width: 150px;height: 150px;box-shadow: 0 0 10px 0px deeppink;text-align: center;line-height: 150px;margin: 10px}
</style>
</head>
<body>
<div class="main">
<p id="mouse_event_1">1</p>
<p id="mouse_event_2">2</p>
<p id="mouse_event_3">3</p>
</div>
<script>
var mouse_event_1 = document.getElementById("mouse_event_1");
var mouse_event_2 = document.getElementById("mouse_event_2");
var mouse_event_3 = document.getElementById("mouse_event_3");
mouse_event_1.onclick = function () {
mouse_event_1.innerHTML = "onclick Event";
}
// mouse_event_1.onmouseover = function () {
// mouse_event_1.innerHTML = "onmouseover";
// }
// mouse_event_1.onmouseout = function () {
// mouse_event_1.innerHTML = "onmouseout";
// }
mouse_event_1.onmouseleave = function () {
mouse_event_1.innerHTML = "onmouseleave";
}
mouse_event_1.onmouseenter = function () {
mouse_event_1.innerHTML = "onmouseenter";
}
mouse_event_2.onmousedown = function () {
mouse_event_2.innerHTML = "onmousedown"
}
mouse_event_2.onmouseup = function () {
mouse_event_2.innerHTML = "onmouseup"
}
mouse_event_3.ondblclick = function () {
mouse_event_3.innerHTML = "ondbclick"
}
</script>
</body>
</html>
表单事件
之前我们学了很多表单相关的东西,input等标签,那这个表单事件是什么??也就是对这些表单元素提交相关操作的时候,所需要的一些事件信息,那这些表单事件有哪些分类呢???
如下所示:
- 元素失去焦点事件
- 元素获得焦点事件
- 当用户改变表单内容的事件
- 重置按钮被点击之后的事件
- 提交按钮被点击之后的事件
如下表所示:
事件类型 | 相关函数 |
---|---|
元素失去焦点 | onblur |
元素获得焦点 | onfocus |
用户改变表单的内容 | onchange |
用户点击重置按钮 | onreset |
提交按钮被点击 | onsubmit |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
<meta name="Generator" content="EditPlus®"> <!--编辑器的名称-->
<meta name="Author" content="作者是谁">
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述和简介">
<style type="text/css">
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
ul,ol{margin: 0; list-style: none; padding: 0;}
a{ text-decoration: none; }
*{ margin: 0; padding: 0; }
.main{width: 800px;margin: 40px auto;box-shadow: 0 0 10px 0 deeppink}
form{margin: auto}
p{height: 50px;text-align: center;}
.main #text{width: 300px;height: 40px}
.main #btn_submit{width: 50px;height: 40px}
.main #btn_reset{width: 50px;height: 40px}
</style>
</head>
<script>
function myFunction(){
var x = document.getElementById("text");
x.value=x.value.toUpperCase();
}
</script>
<body>
<div class="main">
<form action="">
<p id="output">output</p>
<input id="text" type="text" onchange="myFunction()">
<input id="btn_submit" type="submit">
<input id="btn_reset" type="reset">
</form>
</div>
<script>
var text = document.getElementById("text");
var btn_submit = document.getElementById("btn_submit");
var btn_reset = document.getElementById("btn_reset");
var output = document.getElementById("output");
text.onblur = function () {
output.innerHTML = "onblur"
}
text.onfocus = function () {
output.innerHTML = "onfocus";
}
text.onchange = function () {
output.innerHTML = "onchange";
}
btn_submit.onclick = function () {
console.log("onsubmit");
}
btn_reset.onreset = function () {
console.log("onreset");
}
</script>
</body>
</html>
注意以上,如果测试onchange的时候,需要将其他的都给注释掉,只留下onchange对应的表单相关的信息,因为会造成冲突
还有就是表单的onreset和onsubmit,因为表单提交或者重置后浏览器会清除掉相关信息,这个时候也不会有打印,一般这两个事件并不会经常使用到,因为他们都可以使用onclick来进行代替
键盘事件
键盘事件,顾名思义,也就是跟键盘相关的一些事件
主要有以下几个分类:
事件类型 | 相关函数 |
---|---|
onkeydown | 某个键盘的键被按下 |
onkeypress | 某个键盘的键被按下或者按住 |
onkeyup | 某个键盘的键被松开 |
键盘事件可能使用的不太多,暂时不赘述
系统事件
对于系统事件,主要是有以下几个分类
事件类型 | 相关函数 |
---|---|
onload | 某个页面或图像被完成加载,整个html页面,只允许有一次onload的过程 |
onresize | 窗口或框架被调整尺寸的时候 |
onselect | 文本被选中的时候的事件 |
onerror | 当加载文档或图像时发生某个错误,这个就是文档加载路径出现了问题的时候 |
关于以上几个系统事件,其实使用都是比较简单的,这个可以结合css里面的resize等属性来进行联合使用监听。在这里也不赘述。