#1、事件
##1.1事件三要素
- 事件源：触发事件的元素
- 事件类型：行为，鼠标点击、悬停等
- 事件处理函数：事件发生时要进行的操作
##1.2添加/绑定事件
###1.2.1html事件监听器
在html相对应的元素的开始标签中调用函数
写法：事件类型 = "事件处理函数调用"
在js中声明事件处理函数
```js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: orange;
}
</style>
</head>
<body>
<div onclick = "fn()"></div>
<script>
function fn(){
console.log("hello")
}
</script>
</body>
```
###1.2.2DOM0级事件监听
写到JS中
写法：事件源.事件类型 = 事件处理函数（多个函数会覆盖）
在事件处理函数中，要修改属性值，如果该属性为两个单词，则用驼峰法合并写这个属性；
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: orange;
}
</style>
</head>
<body>
<div></div>
<script>
let div = querySelector("div");
div.onclick = function(){
div.style.backgroundColor = "red";
}
</script>
</body>
###1.2.3DOM2级事件监听器
写到JS中
写法：事件源.addEventListener("事件类型",事件函数名,布尔值)
多个事件函数不会覆盖
上例中JS中可以写
let div = querySelector("div");
div.addEventListener("click",fn,false)；
function fn (){
console.log("world")
}
布尔值为true,为捕获类型，为false，事件就是冒泡类型
##1.3删除事件
###1.3.1删除DOM0级事件
写法：事件源.事件类型 = null;
div.onclick = null;
###1.3.2删除DOM2级事件
写法：事件源.removeEventListener("事件类型",事件函数名，布尔值）
事件类型都去掉on
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: orange;
}
</style>
</head>
<body>
<div id = "a"></div>
<script>
let div = document. getElementById("a")
function fn (){
console.log("hello");
}
div.addEventListener("click", fn,false)
div.removeEventListener("click",fn, false)
