详解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("第一个点击事件")});
document.getElementById("btn1").addEventListener("click",function(){console.log("第二个点击事件")});
document.getElementById("btn1").addEventListener("click",function(){console.log("第三个点击事件")});
document.getElementById("btn1").addEventListener("dblclick",function(){console.log("双击事件")});

向window对象添加事件句柄
addEventListener()方法允许在HTML DOM 对象添加事件监听，HTML DOM对象如：HTML元素，HTML文档，window对象，或者其他支持的事件对象

document.body.addEventListener("click",function(){console.log("body")})

传递参数：

//当传递参数值时，使用函数调用带参的函数
document.getElementById("btn").addEventListener("click",funct(x,y))
function funct(x,y){
	var z =x+y;
	document.getElementById("p2").innerHTML=z;
}

事件冒泡或事件捕获？
事件传递两种方式：冒泡与捕获
事件传递定义了元素事件触发的顺序
在冒泡中，内部元素的事件会被触发，然后再触发外部元素
在捕获中，外部元素的事件会被先触发，然后才会触发内部元素的事件

<div id="div">
	<h1 id="h1">
		<p id="p">p标签</p>
		<a id="a">a标签</a>
	</h1>
</div>
<script>
//冒泡传递
document.getElementById("div").addEventListener("click",function(){console.log("我是最外面的div")});
document.getElementById("h1").addEventListener("click",function(){console.log("我是第二层h1")});
document.getElementById("p").addEventListener("click",function(){console.log("我是最里面的p")});
document.getElementById("a").addEventListener("click",function(){console.log("我是与p平辈的a")});
//结果为 p(a) --->  h1  ---> div
</script>

<script>
//捕获传递
document.getElementById("div").addEventListener("click",function(){console.log("我是最外面的div")},true);
document.getElementById("h1").addEventListener("click",function(){console.log("我是第二层h1")},true);
document.getElementById("p").addEventListener("click",function(){console.log("我是最里面的p")},true);
document.getElementById("a").addEventListener("click",function(){console.log("我是与p平辈的a")},true);
//结果为 div --->  h1  ---> p(a)
</script>

removeEventListener()方法
移除由addEventListener()方法添加的事件句柄
移除添加的事件句柄的时候，添加的函数一定要是外部函数，不然无法定位到函数，就不能移除

<button id="btn"></button>
<script>
document.getElementById("btn").addElementListener("click",func);
document.getElementById("btn").removeElementListener("click",func);
function func(){
	console.log("点击事件");
}
</script>

浏览器兼容问题

IE8及更早的IE版本，Opera7.0及其更早的版本不支持addEventListener和removeEventListener()方法。
但是，对于这类浏览器版本可以使用detachEvent()方法来移除事件句柄
语法：
添加
element.attachEvent(event,function);
删除
element.detachEvent(event,function);

//跨浏览器解决方法
<p id="p"></p>
<script>
var a =document.getElementById("p");
if(a.addEventListener){
  a.addEventListener("click",funct)//现在主流的浏览器
}else if(a.attachEvent){
	a.attachEvent("click",funct);//IE8及其更早的版本
}
function funct(){
	console.log("浏览器兼容性");
}
</script>