addeventlistener,addeventlistener第三个参数
addeventlistener是什么意思
addEventListener是一个侦听事件并处理相应的函数。
参数
1、type:String
事件的类型。
2、listener:Function
侦听到事件后处理事件的函数。 此函数必须接受 Event 对象作为其唯一的参数，并且不能返回任何结果，如以下示例所示： 访问修饰符function
函数名(evt:Event):void
3、useCapture:Boolean (default = false)
这里牵扯到“事件流”的概念。侦听器在侦听时有三个阶段：捕获阶段、目标阶段和冒泡阶段。顺序为：捕获阶段(根节点到子节点检查是否调用了监听函数)→目标阶段(目标本身)→冒泡阶段(目标本身到根节点)。此处的参数确定侦听器是运行于捕获阶段、目标阶段还是冒泡阶段。
如果将 useCapture 设置为 true，则侦听器只在捕获阶段处理事件，而不在目标或冒泡阶段处理事件。 如果useCapture 为
false，则侦听器只在目标或冒泡阶段处理事件。 要在所有三个阶段都侦听事件，请调用两次 addEventListener，一次将 useCapture 设置为
true，第二次再将useCapture 设置为 false。
4、priority:int (default = 0)
事件侦听器的优先级。 优先级由一个带符号的 32 位整数指定。 数字越大，优先级越高。 优先级为 n 的所有侦听器会在优先级为 n -1
的侦听器之前得到处理。 如果两个或更多个侦听器共享相同的优先级，则按照它们的添加顺序进行处理。 默认优先级为 0。
5、useWeakReference:Boolean (default = false)
确定对侦听器的引用是强引用，还是弱引用。 强引用(默认值)可防止您的侦听器被当作垃圾回收。 弱引用则没有此作用。
addEventListener的第三个参数到底该怎么设置
从 官方文档 看，addEventListener 方法使用如下：
主要关注下第三个参数，可以设置为bool类型（useCapture）或者object类型(options)。
removeEventListener的参数与addEventListener类似：
在移除之前添加的监听事件时，很显然需要传入同样的type和listener，那第三个参数options和useCapture呢?
只会检查addEventListener的useCapture或options中的capture值。
例如:
当DOM元素与事件拥有不同的生命周期时，倘若不remove掉eventListener就有可能导致内存泄漏（保留或增加了不必要的内存占用）。比如在单页应用中，切换了页面后，原组件已经卸载，但其注册在document上的事件却保留了下来，白白占用了内存空间。 所以removeEventlister与addEventListener成对儿出现是best practice，可以避免可能出现的内存泄漏问题。
addEventListener和on的区别
addEventListener是在 FireFox 上的用法。
addEventListener的参数一共有三个，语法为：
element.addEventListener(type,listener,useCapture)
详解
其中element是要绑定函数的对象。
type是事件名称，要注意的是"onclick"要改为"click","onblur"要改为"blur",也就是说事件名不要带"on"。
listener当然就是绑定的函数了，记住不要跟括号
最后一个参数是个布尔值，表示该事件的响应顺序,下面重点介绍一下addEventListener的第3个参数(useCapture)。
userCapture若为true,则浏览器采用Capture,若为false则采用bubbing方式。建议用false
区别：pre t="code" l="java"var btn1Obj = document.getElementById("btn1");
//element.addEventListener(type,listener,useCapture);
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);执行顺序为method1-method2-method3 pre t="code" l="java"document.getElementById("btn").onclick = method1;
document.getElementById("btn").onclick = method2;
document.getElementById("btn").onclick = method3;如果这样写,那么将会只有medhot3被执行
on 和 addEventListener 的区别
第一种：
第二种：
第三种：当函数fn有参数的情况下使用匿名函数来传参：
形式 ：addEventListener(event,funtionName,useCapture)
参数：
? ?? event: 事件的类型如 “click”
? ?? funtionName： 方法名
? ?? useCapture(可选)： 布尔值，指定事件是否在捕获或冒泡阶段执行。
????????????true - 事件句柄在捕获阶段执行
????????????false- false- 默认。事件句柄在冒泡阶段执行
写法：
第一种：
第二种，没参数可以直接写函数名
第三种：函数有参数时需要使用匿名函数来传递参数
1.on事件会被后面的on的事件覆盖
以onclick为例：
最终会只有弹框输出：
啦啦
这样会连续输出：
啦啦
啾啾
1.特别说明addEventListener不被 IE9 以下兼容，IE9以下用使用 addEvent()
obj.addEvent( event , funtionName );
参数：
event:事件类型（需要写成“onclick”前面加on，这个与addEventListener不同）
funtionName:方法名（要参数是也是需要使用匿名函数来传参）
如何使用addEventListener添加事件
火狐和其他浏览器都不支持,幸运的是他们都支持W3C标准的：
addEventListener和removeEventListener方法
形如：element.addEventListener(type,listener,useCapture);//添加事件
element.removeEventListener(type,listener,useCapture);//注销事件
这里需要和attchEvent相区别，event直接写事件名即可，如click事件-object.addEventListener("click",listener,useCapture);
例：
JS：
window.onload = function(){
var btn1 = document.getElementById("btn1");
btn1.addEventListener("click",test1,false);
var btn2 = document.getElementById("btn2");
btn2.addEventListener("click",function(){
btn1.removeEventListener("click",test1,false);
},false);
}
function test1(){
alert("111");
}
--------------------------------------------
html：
button id="btn1"测试addEventListener/button
button id="btn2"测试removeEventListener/button
-------------------------------------------------------------------------------
再将上面的例子改一下：
JS：
window.onload = function(){
var btn1 = document.getElementById("btn1");
btn1.addEventListener("click",test1,false);
btn1.addEventListener("click",test2,false);
btn1.addEventListener("click",test3,false);
var btn2 = document.getElementById("btn2");
btn2.addEventListener("click",function(){
btn1.removeEventListener("click",test1,false);
},false);
}
function test1(){
alert("111");
}
function test2(){
alert("222");
}
function test3(){
alert("333");
}
HTML：
button id="btn1"测试addEventListener/button
button id="btn2"测试removeEventListener/button
现象：页面打开之后，点击【测试addEventListener】，依次弹出"111","222","333"
说明，使用addEventListener添加事件后按照绑定顺序执行
再点击【测试removeEventListener】，则会发现不再弹“111”，即test1事件被注销