事件的基础知识
事件三要素：
事件源： 事件被触发的对象 谁被触发
事件类型：如何触发，什么事件例如鼠标点击，鼠标经过，键盘按下等
事件处理程序：通过函数赋值的方式完成
常用的事件：
1）、鼠标事件
onclick 当点击鼠标时运行的事件
onmousedown 当按下鼠标按钮时运行的事件
onmouseup 当松开鼠标按钮时运行的事件
onmousemove 当鼠标指针移动的时候运行的事件
onmouseover 当鼠标指针移动到元素之上时运行的事件（不可以阻止冒泡）
onmouseout 当鼠标指针移出元素时运行的事件（不可以阻止冒泡）
onmouseenter 当鼠标指针移到元素之上时运行的事件（可以阻止冒泡）
onmouseleave 当鼠标指针移出元素时运行的事件（可以阻止冒泡）
onmousewheel 当转动鼠标滚轮时运行的事件
onscroll 当滚动元素的滚动条时运行的事件
2）、键盘事件
onkeyup 键盘按键松开时触发的事件
onkeydown 键盘按键按下时触发的事件
onkeypress 键盘按键按下时触发的事件
3）、表单事件
onfocus 表单获得焦点时触发的事件
onblur 表单失去焦点时触发的事件
oninput 表单每次输入时触发的事件
onchange 表单内容发生改变时触发的事件
onselect 表单文本被选取时触发的事件
onreset 表单重置时触发的事件
onsubmit 表单提交时触发的事件
事件在代码中使用
1）、可以直接在script标签里面使用
obj.事件名=function(){}
2)、可以在html标签行内使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="fun()">按钮1</button>
<button class="btn">按钮2</button>
<script>
var btn = document.querySelector('.btn')
btn.onclick = function () {
console.log(222);
}
function fun() {
console.log(111);
}
</script>
</body>
</html>3）、事件监听
可以使用addEventListener来监听事件
obj.addEventListener('事件类型'，function(){}，[useCapture])
useCapture：可选，是否在捕获阶段触发事件，需要一个布尔值，默认是false，在冒泡阶段处理程序，如果是true，就是在捕获阶段处理程序（后面事件流时，详细说）
注意：ie8及以下不支持
注意：事件类型不用加on
removeEventListener（）用来解除绑定事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button class="btn1">按钮1</button>
<button class="btn">按钮2</button>
<script>
var btn = document.querySelector('.btn')
var btn1 = document.querySelector('.btn1')
btn.addEventListener('click', function () {
console.log(111);
})
btn1.addEventListener('click', fun)
function fun() {
console.log(222);
// 让btn1点击一次后就解绑click事件
btn1.removeEventListener('click', fun)
}
</script>
</body>
</html>4)、事件对象 event
-当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参
传递进响应函数，在事件对象中封装了当前事件相关的一切信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button class="btn1">按钮1</button>
<button class="btn">按钮2</button>
<script>
var body = document.body
body.addEventListener('click', function (e) {
// 点哪个按钮就打印哪个，点击谁事件对象就是谁
console.log(e.target);
})
window.addEventListener('keydown', function (e) {
// 根据点击不同的键拿到哪个键的keyCode值
console.log(e.keyCode);
})
</script>
</body>
</html>