addEventListener是一个侦听事件并处理相应的函数。
原型:
public override function addEventListener(type:String, listener:Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false):void
参数:
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)
确定对侦听器的引用是强引用还是弱引用。强引用(默认值)可防止您的侦听器被当作垃圾回收。弱引用则没有此作用。
注意:
使用EventDispatcher对象注册事件侦听器对象,以使侦听器能够接收事件通知。可以为特定类型的事件、阶段和优先级在显示列表的所有节点上注册事件侦听器。
成功注册一个事件侦听器后,无法通过额外调用addEventListener()来更改其优先级。要更改侦听器的优先级,必须首先调用removeListener()。然后,可以使用新的优先级再次注册该侦听器。
示例:
function Go(){
//...
}
document.getElementById("testButton").addEventListener("click", Go, false);
或者listener直接就是函数
document.getElementById("testButton").addEventListener("click", function(){Go();}, false);
删除监听事件
document.getElementById("testButton").removeEventListener("click", Go);
问答解惑
很多时候我们不但需要动态添加事件,也需要将此事件的回调函数增加一些参数,来满足我们的需求,而自带的addEventListener方法默认只有一个参数event事件类型。
方案1:
<body>
<div id="ttt">testtttttt</div>
<script type="text/javascript">
function callback(){
alert(111);
}
function _fn(calllback){
return callback();
}
var ttt = document.getElementById("ttt");
ttt.addEventListener("click", _fn, false);
</script>
</body>
<div id="ttt">testtttttt</div>
<script type="text/javascript">
function callback(){
alert(111);
}
function _fn(calllback){
return callback();
}
var ttt = document.getElementById("ttt");
ttt.addEventListener("click", _fn, false);
</script>
</body>
方案2:
<body>
<div id="ttt">testtttttt</div>
<script type="text/javascript">
function callback(){
alert(111);
}
function _fn(callback){
callback();
}
var ttt = document.getElementById("ttt");
ttt.addEventListener("click", function(){_fn(callback);}, false);
</script>
</body>
<div id="ttt">testtttttt</div>
<script type="text/javascript">
function callback(){
alert(111);
}
function _fn(callback){
callback();
}
var ttt = document.getElementById("ttt");
ttt.addEventListener("click", function(){_fn(callback);}, false);
</script>
</body>
方案2与方案1区别:是在事件销毁时处理方式稍微不同。