一.常用事件
1.blur 失去焦点
2.focus 获得焦点
3.click 鼠标单击
4.dbclick 鼠标双击
5.mousedown 鼠标按下
6.mouseover 鼠标经过
7.mousemove 鼠标移动
8.mouseout 鼠标离开
9.mouseup 鼠标弹起
10.reset 表单重置
11.submit 表单提交
12.change 下拉列表选中项改变，或者文本框内容改变
13.select 文本被选定
14.load 页面加载完
任何一个事件都会对应一个事件句柄，事件句柄是在事件前面加上on，
onxxx事件句柄出现在一个标签的属性上，事件句柄以属性的形式存在。
二.事件注册的两种方式
第一种方式：直接在标签中使用事件句柄
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type = "text/javascript">
//对于当前程序来说，sayHello被称为回调函数
function sayHello(){
alert("Hello");
}
</script>
<input type = "button" value = "按钮" onclick = "sayHello()"/>
</body>
</html>
第二种方式：使用纯JS代码完成事件的注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type = "button" value = "按钮" id = "myButton"/>
<input type = "button" value = "按钮1" id = "myButton1"/>
<input type = "button" value = "按钮2" id = "myButton2"/>
<script type = "text/javascript">
function sayHello(){
alert("Hello");
}
function sayHello1(){
alert("Hello1");
}
//获取按钮对象
var myObject = document.getElementById("myButton");
//给按钮对象的onclick属性赋值
myObject.onclick = sayHello;//将回调函数sayHello注册到click事件上。
document.getElementById("myButton1").onclick = sayHello1;
var myObject2 = document.getElementById("myButton2");
myObject2.onclick = function(){
alert("Hello2");
}
</script>
</body>
</html>
Hello1的输出是将Hello的输出两步合成一步，而Hello2的输出是回调函数是一个匿名函数。
三.JS代码的执行顺序
我们以上面的代码为例，只是将<input type = "button" value = "按钮" id = "myButton"/>放到js代码之后
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type = "text/javascript">
function sayHello(){
alert("Hello");
}
//获取按钮对象
var myObject = document.getElementById("myButton");
//给按钮对象的onclick属性赋值
myObject.onclick = sayHello;//将回调函数sayHello注册到click事件上。
</script>
<input type = "button" value = "按钮" id = "myButton"/>
</body>
</html>
我们发现只有一个按钮，并且没有任何的功能，我们查看控制台
通过程序分析，发现当程序执行var myObject = document.getElementById("myButton");时，因为页面还没有加载完，所以"myButton"的值为空，所以我们的程序是有问题的。
我们想到前面有一个事件load（页面加载完成），我们可以利用它来使得我们的页面加载完成，也就是使得"myButton"有了值后才执行函数，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type = "text/javascript">
window.onload = ready;
function ready() {
function sayHello(){
alert("Hello");
}
//获取按钮对象
var myObject = document.getElementById("myButton");
//给按钮对象的onclick属性赋值
myObject.onclick = sayHello;//将回调函数sayHello注册到click事件上。
}
</script>
<input type = "button" value = "按钮" id = "myButton"/>
</body>
</html>
我们的代码可以简化一下，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type = "text/javascript">
window.onload = function () {
//回调函数a
function sayHello(){
//回调函数b
alert("Hello");
}
document.getElementById("myButton").onclick = sayHello;
}
</script>
<input type = "button" value = "按钮" id = "myButton"/>
</body>
</html>
页面加载过程中，函数a注册给onload事件
页面加载后，回调函数a执行
回调函数a执行过程中，把b函数注册给了"id = myButton"事件
当"id = myButton"节点发生click事件后，b函数被调用并且执行。
四.设置节点的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
window.onload = function(){
document.getElementById("button").onclick = function(){
let changeText = document.getElementById("text1");
changeText.type = "checkbox";
}
}
</script>
<input value = "text" id = "text1" type = "text"/>
<input value = "文本框改为复选框" id = "button" type = "button"/>
</body>
</html>
我们注意观察changeText.type = "checkbox";，只要节点有的属性，我们都可以通过使用点的方式访问。
五.键盘按下的事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type = "text/javascript">
window.onload = function(){
document.getElementById("text1").onkeydown = function(){
alert(111);
}
}
</script>
<input type = "text" id = "text1" />
</body>
</html>
其中onkeydown 为键盘按下的事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type = "text/javascript">
window.onload = function(){
document.getElementById("text1").onkeydown = function(event){
alert(event);
}
}
</script>
<input type = "text" id = "text1" />
</body>
</html>
以上的程序可以获取键盘敲击事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type = "text/javascript">
window.onload = function(){
document.getElementById("text1").onkeydown = function(event){
alert(event.keyCode);
}
}
</script>
<input type = "text" id = "text1" />
</body>
</html>
对于键盘敲击事件，都有keyCode属性来获取键值。