JavaScript事件基础
- 事件的概述
- 事件三要素
- 常见的事件
- 事件的调用
- 在script标签中调用
- 在元素中调用
- 鼠标事件
- onclick事件
- onmouseover和onmouseout
- onmousedown和onmouseup
- 页面事件
- onload
- onbeforeunload
- this
- 其他事件
事件的概述
事件操作是
JavaScript的核心。
用户进行操作时，触发了JavaScript的事件，然后会产生相对应的效果；例如：点击按钮会弹出对话框，这个点击操作就是一个事件，弹出对话框就是那个效果（事件过程）。
事件三要素
- 事件主角：按钮，
div元素…等； - 事件类型：点击，移动…等；
- 事件过程：事件发生的事情。
常见的事件
- 鼠标事件
- 键盘事件
- 表单事件
- 编辑事件
- 页面事件
事件的调用
在JavaScript中，事件的调用方式有两种：
- 在元素中调用；
- 在script标签中调用。
注意：使用在script标签中调用事件比较多，因为这样可以使得HTML和JavaScript代码分离。
在script标签中调用
在
<script></script>标签中调用。
语法：
obj.事件名 = function(){
....
};
这里的obj指的是DOM（Document Object Model）对象，指的是对应的元素节点document.body等等.
注意：语法最后面的分号需要加上，因为这是一个赋值语句，不加不会报错，但是为了规范最好加上。
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>text</title>
</head>
<body>
<input id="btn" type="button" value="按钮" />
<script type="text/javascript">
// 事件调用
window.onload = function(){
var btn = document.getElementById('btn');
btn.onclick = function(){
alert(this.value)
}
}
</script>
</body>
</html>
在元素中调用
在元素中调用即存在事件属性，对该事件属性赋值即可。
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>text</title>
</head>
<body>
<!--元素中调用click点击事件-->
<input id="btn" type="button" value="按钮" onclick="xxx()"/>
<script type="text/javascript">
xxx = function(){
alert("出错")
}
</script>
</body>
</html>
鼠标事件
顾名思义，就是和鼠标有关的事件。点击鼠标会有什么效果，鼠标移动到那会有什么效果，离开那又有什么效果…等。
常见的鼠标事件：
可以根据英文来记忆（上述事件都是以
on开头的）：
click:点击
mouse:鼠标
😒注意：平日里鼠标单击事件经常和按钮挂钩，但并不是只能用在按钮上，任何元素都是可以添加鼠标事件的。
onclick事件
下面用div标签模拟一下onclick事件，说明一下不是只使用于按钮：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>text</title>
<style type="text/css">
#text{
text-align:center;
}
#text:hover{
color:pink;
cursor:pointer;
text-decoration:underline;
}
</style>
<script type="text/javascript">
window.onload = function(){
var text = document.getElementById('text');
text.onclick = function(){
alert("傻逼");
}
}
</script>
</head>
<body>
<div id="text">哈哈哈</div>
</body>
</html>
onmouseover和onmouseout
可以从字面上发现其怎么用，on后面指出事件，
mouse鼠标，over覆盖，也就是鼠标移动到这个元素时进行的事件过程；反之onmouseout就是鼠标移出该元素进行的事件过程。
注意：是碰到元素，不是元素中的文本内容；
测试：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>text</title>
<!-- <style type="text/css">-->
<!-- #text{-->
<!-- text-align:center;-->
<!-- }-->
<!-- #text:hover{-->
<!-- color:pink;-->
<!-- cursor:pointer;-->
<!-- text-decoration:underline;-->
<!-- }-->
<!-- </style>-->
<script type="text/javascript">
window.onload = function(){
var text = document.getElementById('text');
text.onmouseover = function (){
this.style.color = "pink"
this.style.textAlign = "center"
}
text.onmouseout = function (){
this.style.color = "black"
}
}
</script>
</head>
<body>
<div id="text">哈哈哈</div>
</body>
</html>
这是div元素这个“默认盒子”:
当鼠标移动到该元素上时（不移动到文本内容上也可以），也就是该“盒子”上：
onmousedown和onmouseup
和上面差不多；只不过这是对应着鼠标点击后和鼠标松开对应的事件过程。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>text</title>
<!-- <style type="text/css">-->
<!-- #text{-->
<!-- text-align:center;-->
<!-- }-->
<!-- #text:hover{-->
<!-- color:pink;-->
<!-- cursor:pointer;-->
<!-- text-decoration:underline;-->
<!-- }-->
<!-- </style>-->
<script type="text/javascript">
window.onload = function(){
var text = document.getElementById('text');
text.onmousedown = function (){
this.style.color = "pink"
this.style.textAlign = "center"
}
text.onmouseup = function (){
this.style.color = "black"
this.style.textAlign = "left"
}
}
</script>
</head>
<body>
<div id="text">哈哈哈</div>
</body>
</html>
测试效果：点的时候哈哈哈在中间，不点在左边。
页面事件
一般来说，想要获取某个节点，然后又想要
HTML代码和JavaScript代码分开。这个时候就应该要想到页面事件。在JavaScript中，常用页面事件只有两个，一个是onload，一个是onbeforeunload。
onload
首先代码是从上向下执行的，如果想要等代码执行完再执行一段代码，这个时候
onload就派上用场了。如果节点还未加载，就直接加载函数，然后函数里面调用了该节点那肯定会出问题的，onload可以让代码加载完再去执行该函数。
其实前面的代码都用了这个页面事件，所以这里就不举例了。语法就是：
window.onload = function(){}
onbeforeunload
该事件在关闭该页面时会发生事件过程。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
alert("欢迎！");
}
window.onbeforeunload = function (e)
{
e.returnValue = "记得下来再来喔！";
}
</script>
</head>
<body>
</body>
</html>
this
根据事件的语法：
obj.事件名 = function(){}
在function()大括号中用的this就和obj是等价的。（例如obj.value和this.value等价）
其他事件
可以看Javascript基础进行更多事件的了解。
