JavaScript 事件监听addEventListener
JavaScript事件监听器
addEventListener()的工作原理是将实现EventListener的函数添加到调用它的EventTarget上的指定事件类型的事件侦听器列表中。
1、事件监听 addEventListener()
语法：ele.addEventListener(event_type , function ,布尔值(是否启用事件捕获去触发事件))
1.第一个参数是 事件的类型 （比如"click"鼠标单击事件）；
2.第二个参数是在事件发生时我们 要调用的函数 ；
3.最后一个参数为 可选参数 ，不写时默认false(即事件冒泡)
【注意 】事件监听中，请勿对事件类型event_type使用 “on” 前缀。比如，我们要使用 “click” 代替 “onclick”。
<button id="btn">点我一下试试</button>
<script>
var btn_ele = document.getElementById("btn");
btn_ele.addEventListener("click" , function(){
alert("事件监听，你点击了按钮");
});
</script>
2、移除监听 removeEventListener()
语法：ele.removeEventListener(事件类型,function)
事件监听的主动触发 dispatchEvent()
API: dispatchEvent(event); 在对应的元素上触发一个事件
- 创建一个新的事件对象; var e = new Event(“event_type”);
- 触发事件 : dispatchEvent(e) ;
btn_ele.addEventListener("click" , function(){
console.log("btn_ele 事件监听主动触发")
});
// btn_ele.onclick();//无法触发onclick。报错btn_ele.onclick is not a function
// 如何主动触发？
// 自己创建一个事件对象，去触发这个事件处理函数
var e = new Event("click");
// btn_ele.dispatchEvent(e);
// 如果是类似轮播图效果 可以加定时器
setInterval(function(){
btn_ele.dispatchEvent(e);
},1000)
监听器的兼容问题
IE8 及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。
不过，对于这些特殊的浏览器版本，可以使用 attachEvent() 方法向元素添加事件处理程序，并由 detachEvent() 方法删除。
【注意 】使用attachEvent时，事件类型要加"on"前缀。
下面是事件监听的兼容写法 ：
// IE8的监听器写法
// document.attachEvent("onclick" , function(){
// alert("hello world");
// });
// 移除监听是detachEvent
// 兼容写法
// 事件监听 :
function on( ele , type , callback ){
if(typeof ele.addEventListener === "function"){
ele.addEventListener( type , callback );
}else{
ele.attachEvent("on" + type , callback);
}
}
// 移除监听 :
function off( ele , type , callback ){
if(typeof ele.removeEventListener === "function"){
ele.removeEventListener( type , callback );
}else{
ele.detachEvent("on" + type , callback);
}
}传统事件绑定（DOM0）和事件监听器绑定（DOM2）的区别
<button id="btn">点我一下试试</button>
<script>
var btn_ele = document.getElementById("btn");
// 事件绑定
btn_ele.onclick = function(){
alert("事件绑定，你点击了按钮");
}
// 事件监听
btn_ele.addEventListener("click" , function(){
alert("事件监听，你点击了按钮");
});
</script>DOM0 （事件绑定）
1.一个元素上只能有一个事件处理函数，容易删除;
btn_ele.onclick = function(){
alert("事件绑定，你点击了按钮");
// 想让事件只执行一次，添加下面这句话即可
btn_ele.onclick = null;
}缺点：事件处理函数难以分割，存在覆盖的问题,容错率低。
btn_ele.onclick = function(){
alert("事件绑定，你点击了按钮1");
}
btn_ele.onclick = function(){
alert("事件绑定，你点击了按钮2");//只弹出2，2把1覆盖了
}2.onclick的事件触发顺序是不可改变的，只能以冒泡的顺序进行传播。
btn_ele.onclick = function(){
alert("button事件绑定，你点击了按钮");
}
document.onclick = function(){
alert("document事件绑定，你点击了按钮");
//冒泡：从里到外触发，先触发button、再触发document的
}DOM2 事件监听器
1. 允许向一个元素添加多个相同事件，同时不覆盖已有事件；
即一个事件可以存着多个事件处理函数，容错率更高。
btn_ele.addEventListener("click" , function(){
alert("事件监听，你点击了按钮1");
});
btn_ele.addEventListener("click" , function(){
alert("事件监听，你点击了按钮2");
//点一次按钮，会弹窗两次，即1和2
});向一个元素添加不同类型的事件当然也允许啦。
2. 删除监听时，需要用到API removeEventListener()
btn_ele.addEventListener("click" , function(){
alert("事件监听，你点击了按钮");
// arguments.callee代表当前函数
btn_ele.removeEventListener("click" , arguments.callee);
// 此时 监听在执行一次后被删除
});考虑到严格模式禁用callee属性，我们可以将单独函数提出来：
btn_ele.addEventListener("click" , clickHandler);
function clickHandler(){
"use strict"
alert("事件监听，你点击了按钮");
btn_ele.removeEventListener("click" , clickHandler);
}3. 事件监听可以改变事件流的触发顺序
—— 第3个参数为true时事件捕获，false时事件冒泡
btn_ele.addEventListener("click" , function(){
alert("button事件监听，你点击了按钮");
},true);
document.addEventListener("click" , function(){
alert("document事件监听，你点击了按钮");
},true);
// true为事件捕获，从外往里逐个触发。即先触发document，再触发button冒泡和捕获 是事件传播的2种方式
事件冒泡，是事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。浏览器默认事件冒泡。
简单来说，事件冒泡是由内向外的事件传播方式 。
而事件捕获是从外往里逐个触发 。