一、简 介

addEventListener是一个侦听事件并处理相应函数。

二、原型及参数

function addEventListener(type:String, listener:Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false)

参数说明
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)
确定对侦听器的引用是强引用,还是弱引用。 强引用(默认值)可防止您的侦听器被当作垃圾回收。 弱引用则没有此作用。

三、用法示例

1、添加监听事件

function Go()
{
//...
}
document.getElementById("testButton").addEventListener("click", Go, false);

或者 listener 直接就是函数

document.getElementById("testButton").addEventListener("click", function () { ... }, false);

2、删除监听事件

document.getElementById("testButton").removeEventListener("click", Go);

四、参数拓展

很多时候我们不但需要动态添加事件, 也需要将此事件的回调函数增加一些参数,来满足我们的需求,而自带的
addEventListener方法 默认只有一个参数event事件类型,此类问题曾经困扰过我很长时间 .

diqye.html5.GpsDir.prototype._addClickEvent =function(_element,
callBack, //回调函数
//多出来的参数
gpsDir,
id) {
var eventCallBack = callBack;
//********************************************************
eventCallBack = function(event) {
//console.log("enter method [eventCallBack] ");
callBack(gpsDir,id);//这里就可以传自定义的参数了
}
//********************************************************
if(_element.addEventListener){
_element.addEventListener("click", eventCallBack);
}else if(_element.attchEvent) {
_element.attchEvent("onclick", eventCallBack);
}else if(_element.click) {
_element.click = eventCallBack;
}else{
throw "your browse not support this library";
}
}

五、补充—与attachEvent的使用区别

attachEvent与addEventListener区别 适应的浏览器版本不同,同时在使用的过程中要注意
attachEvent方法 按钮onclick
addEventListener方法 按钮click
两者使用的原理:可对执行的优先级不一样,下面实例讲解如下:
attachEvent方法,为某一事件附加其它的处理事件。(不支持Mozilla系列)
addEventListener方法 用于 Mozilla系列