AS3 event flow 事件冒泡机制 以及 stopImmediatePropagation() stopPropagation()用法 及useCapture的用法

如果一个mc下有一个btn,2者都添加click事件:

 

 

 

 

捕获阶段:
鼠标在btn上发出点击事件,首先捕捉到该事件的事stage.,然后事件往下传递到mc,再到btn..(如果鼠标事件发生在btn按钮中的一个 label上,那么该事件还会继续向下传递,直到找到label元件。)AS2中,一旦找到了可以相应事件的函数,就停止了,不会往下传递。这个道理应该说明白了
目标阶段
找到我们的鼠标最底层的目标,也就是btn以后,那么就开始执行btn的侦听函数了。
    如果鼠标事件发生的所在位置,是mc中的btn中的一个label。那么将先执行label的侦听函数。(当然我们的例子中没有label)
冒泡阶段:
执行了目标阶段的侦听函数以后,开始冒泡。
换一个说法是,返回btn的父级元件mc,如果能找到相关的侦听函数,那么就执行,如果没有,就继续往上冒泡到btn的父级元件mc的父级元件stage。看能不能找到相关的侦听函数。

 

 

 

注意一个:首先执行的函数一定是目标对象的侦听函数。就像我们上面的例子一样,点击btn会先trace(“btn click”),然后冒泡到mc,执行trace(“mc click”)..然后继续往上,如果stage我们也加一个侦听函数,执行语句,那么还会继续执行 trace(“stage click”).
到达stage顶层了,冒泡结束。
说到这里,各位看官也应该明白了as3的冒泡究竟是干什么用的了

4 - 冒泡的问题所在以及解决方法
  冒泡也有问题,并不是说它有缺陷,因为出现问题无法避免。
  问题在于,
  假如在上面的例子中,我们不想在点击btn冒泡阶段中执行mc的侦听函数,我们只想执行btn的侦听函数。怎么解决?
同样的问题延伸出去,可以得到很多扩展和应用。
那么我们需要阻止他的冒泡的时候执行相关的侦听函数。
Chm中的方法有

 

 

stopImmediatePropagation():void
防止对事件流中当前节点中和所有后续节点中的事件侦听器进行处理。
stopPropagation():void
防止对事件流中当前节点的后续节点中的所有事件侦听器进行处理。

 

 

用来修改我们上面的例子
代码如下:

import flash.events.*;
mc.addEventListener(MouseEvent.CLICK,mcfunction);
mc.btn.addEventListener(MouseEvent.CLICK,btnfucntion);
function mcfunction(event:MouseEvent) {
        trace("mc click");
}
function btnfucntion(event:MouseEvent) {
        trace("btn click");
        event.stopPropagation();//修改在此处。简单一句,解决问题
}

现在可以试试,点击btn运行得到的结果就是

代码:

btn click

说明,已经防止了冒泡阶段中对mc侦听函数的处理。也就没有trace(“mc click”)了
As3事件机制远远不像这里写的那么简单,还有很多东西需要研究。
本文只为抛砖引玉,让各位能先了解一下冒泡机制。

 

 

关于useCapture:

 

public function addEventListener(type:String, listener:Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false):void
useCapture:Boolean(default = false)确定侦听器是运行于捕获阶段、目标阶段还是冒泡阶段。 如果将 useCapture 设置为 true,则侦听器只在捕获阶段处理事件,而不在目标或冒泡阶段处理事件。 如果 useCapture 为 false,则侦听器只在目标或冒泡阶段处理事件。用这个参数搭配 stopPropagation()/stopImmediatePropagation()可以做些很偏门的事。

 

主要用途则是不侦听当前点击movieclip的事件

 

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
YOLO高分设计资源源码,详情请查看资源内容中使用说明 YOLO高分设计资源源码,详情请查看资源内容中使用说明 YOLO高分设计资源源码,详情请查看资源内容中使用说明 YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值