信息网络中心(最新版)(在运行)
设为首页  |  加入收藏
 西大主站  网站首页  关于中心  技术支持  用户服务  教育技术  技术研究  工会活动  培训信息  下载中心  数字化校园 
当前位置: 网站首页>>教育技术>>教育技术>>正文

AS 3.0的冒泡原理
2011-10-14 00:00   BluE的博客 审核人:

      AS2中的事件侦听,采用的是非冒泡方式,而AS3中的事件侦听,大多采用的是冒泡方式。可冒泡这个词太专业,不少人并不是很明白意思。我在这里尽可能简单的讲述一下:  qj9广西大学网络中心

      首先,我们打开Flash,在舞台上创建一个MC,实例名为t1。然后在t1内再创建一个MC,实例名为t2。qj9广西大学网络中心
      然后我们在第一帧写入代码如下:qj9广西大学网络中心

      t1.onPress = function() {qj9广西大学网络中心
              trace("t1 pressed");qj9广西大学网络中心
      };qj9广西大学网络中心
      t1.t2.onRelease = function() { qj9广西大学网络中心
             trace("t2 pressed");qj9广西大学网络中心
      };qj9广西大学网络中心

      运行后,发现,t1可以触发,但是t2无法触发。  无法触发的原因是:t2位于t1内部,当二者同时触发事件时,t1优于t2触发,或者说t1“挡住了”t2的事件触发。从非冒泡角度来说,虽然是在t2上点击鼠标,但首先接受到点击事件的是t2的上一层(也就是t1)。t1先接受到点击事件,触发相关的函数。然后终止,不再往下传递。这个就是非冒泡机制。qj9广西大学网络中心

      现在,我们打开AS3,舞台上的步骤相同。在第一帧写入代码如下:qj9广西大学网络中心

        function p1(event:MouseEvent):void {qj9广西大学网络中心
                 trace("t1 click");qj9广西大学网络中心
        }qj9广西大学网络中心
        t1.addEventListener(MouseEvent.CLICK, p1);qj9广西大学网络中心

        function p2(event:MouseEvent):void {qj9广西大学网络中心
                 trace("t2 click");qj9广西大学网络中心
        }qj9广西大学网络中心
        t1.t2.addEventListener(MouseEvent.CLICK, p2);qj9广西大学网络中心

      运行后,t1和t2均能顺利触发。也就是说,在事件的捕获阶段,非冒泡机制,只要找到一个可以响应时间的函数,就停止了,不会再往下传递。但冒泡机制还会继续往下走,一直到底层为止。在事件的冒泡阶段,会按照冒泡顺序,一个个激发事件。如我们上面的那个例子,先激发的是t2上的事件“t2 click”,接着才是激发t1上的事件“t1 click”。qj9广西大学网络中心

      但是,冒泡机制也同样会产生一些问题,比如说上面的例子中,t1和t2都会触发,但如果我只想触发t2事件,不想触发t1事件,这时候怎么处理呢?这时候就要用到一些event类的方法,代码如下:。qj9广西大学网络中心
 qj9广西大学网络中心
      function p1(event:MouseEvent):void {qj9广西大学网络中心
              trace("t1 click");qj9广西大学网络中心
      }qj9广西大学网络中心
      t1.addEventListener(MouseEvent.CLICK, p1);qj9广西大学网络中心
 qj9广西大学网络中心
      function p2(event:MouseEvent):void {qj9广西大学网络中心
              trace("t2 click");qj9广西大学网络中心
              event.stopPropagation(); //阻止再冒泡qj9广西大学网络中心
      }qj9广西大学网络中心
      t1.t2.addEventListener(MouseEvent.CLICK, p2);qj9广西大学网络中心

      以上代码运行后,只侦听到t2,不再侦听t1事件。qj9广西大学网络中心

关闭窗口


广西大学版权所有:
Copy@2014
制作维护:广西大学信息网络中心 E_mail:webmaster@gxu.edu.cn