详解js中EventListener监听器（事件委托/事件代理）

监听器：
语法: addEventListener(event,function,userCapture) 方法
第一个参数写事件句柄，不需要加"on",直接写时间名就可以（如：click）
第二个参数是事件触发后调用的函数
第三个参数是个布尔值用于描述事件是冒泡还是捕获,该参数是可选值，默认值为false，即冒泡传递，当值为true时，为捕获传递

触发监听器事件:

//第二个参数写匿名函数
<button id="btn"></button>
<script>
document.getElementById("btn").addEventListener("click",function(){
   console.log("触发监听事件")});
//第二个参数使用函数名，来引用外部函数
document.getElementById("btn").addEventListener("click",func());
function func(){
   
	console.log("外部函数")
}
</script>

1. addEventListener()方法用于指定元素添加事件句柄
2. addEventListener()方法添加的事件句柄不会覆盖已存在的事件句柄
3. 可以向一个元素添加多个事件句柄
4. 可以向同个元素添加多个同类型的事件句柄
5. 也可以向任何DOM对象添加事件监听，不仅仅是HTML元素
6. addEventListener()方法可以更简单的控制事件（冒泡与捕获）
7. 当使用addEventListener()方法时，JavaScript从HTML标记中分离出来，可读性更强，在没有控制HTML标记时也可以添加事件监听

<button id="btn1"></button>
document.getElementById("btn1").addEventListener("click",function(){
   console.log("第一个点击事件")