一、简 介
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系列
评论