一.事件
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态，常用事件如下：
| 事件 | 触发时机 |
| onchange | 用户改变域的内容 |
| onclick | 鼠标点击某个对象 |
| onkeydown | 某个键盘的键被按下时触发 |
| onload | 某个页面或图像被完成“加载” |
| onsubmit | 提交按钮被点击 只应用于form标签 |
其中，要特别注意onsubmit的用法：
1.必须用在form标签中，且input标签的type必须为“submit”
2.onsubmit调用方法时必须加return
3.所调用方法必须返回true或false
以下是使用onsubmit的代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
function test(){
return true;
}
</script>
<form action="http://www.baidu.com" οnsubmit="return test()">
<input type="submit" value="按钮" />
</form>
</body>
</html>看起来和没添加onsubmit的效果是一样的，但是这时如果改变test函数的返回值为false，就会发现页面无法跳转为www.baidu.com了
二.添加事件的三种方法
1.直接添加
第一种添加事件的方式就是直接在目标标签中写出要添加的事件，并为该事件赋值要调用的JavaScript函数，以下是代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
function test(){
console.log("直接添加事件");
}
</script>
<input type="button" value="按钮" οnclick="test()"/>
</body>
</html>
2.用document对象为事件赋值
第二种添加事件的方式是在script标签中调用document对象通过目标标签的名字或id名或类名来获取该标签的document对象，然后调用目标事件的属性并赋值，以下是代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="按钮" id="gg"/>
<script>
document.getElementById("gg").οnclick=function test(){
console.log("第二种添加事件方式");
}
</script>
</body>
</html>
3.使用addEventsListener()方法
第三种添加事件的方法还是使用目标标签的document对象，调用addEventsListener方法为目标事件赋值，以下是代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="按钮" id="gg"/>
<script>
document.getElementById("gg").addEventListener("click",function test(){
console.log("调用方法添加事件");
})
</script>
</body>
</html>
