一.dom事件添加方法
- 获取元素节点，在元素节点上添加事件（注意：如果同时绑定两个类型一样的事件，则后面是事件会覆盖前面的事件）
let div = document.querySelector("div")
// 第一种添加点击事件的方式
div.onclick=function(){
console.log(1)
}
//此事件会覆盖上面的点击事件
div.onclick=function(){
console.log(2)
}
- 通过事件监听的方法添加（不会存在上面那种方法的覆盖问题）
语法
element.addEventListener(事件类型, function, 布尔值);
第一个参数是事件的类型 (如 "click" 或 "mousedown").
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
注意:不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。
二.事件代理
利用 事件冒泡 原理，只指定 一个事件处理程序，就可以管理 同一类型 的所有事件。
（将子元素的是时间代理到他们的父元素上面）
方法：获取父元素节点，在父元素上添加子元素要用到的事件，这样父元素下的子元素就会有因为冒泡机制而可以触发事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
// 事件代理： 将我们li的事件代理到他们的父元素上
var ul = document.querySelector("ul")
ul.addEventListener("click",function(ev){
console.log(ev.target.innerHTML)
console.log(this)
console.log(ev.currentTarget)
})
</script>
</body>
</html>
三.自定义事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>
111
</div>
<script>
//获取div元素节点
let div = document.querySelector("div");
//自定义一个aa事件
var ev = new Event("aa")
//在div上添加事件aa
div.addEventListener('aa',function (ev){
console.log(ev)
})
setTimeout(()=>{
//自定义事件需要用这条语句来派发/触发
div.dispatchEvent(ev)
},3000)
</script>
</body>
</html>
