常用事件方法及技巧(一) -- AS3的冒泡原理

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

      首先,我们打开 Flash8,在舞台上创建一个MC,实例名为t1。然后在t1内再创建一个MC,实例名为t2。如下图所示:

      常用事件方法及技巧(一) -- AS3的冒泡原理_第1张图片

       然后我们在第一帧写入代码如下:
      t1.onPress = function() {
              trace("t1 pressed");
      }
      t1.t2.onRelease = function() {
             trace("t2 pressed");
      }
 
      运行后,发现, t1可以触发,但是t2无法触发。
 
      无法触发的原因是:
      t2位于 t1内部,当二者同时触发事件时,t1优于t2触发,或者说t1“挡住了”t2的事件触发。
      从非冒泡角度来说,虽然是在 t2上点击鼠标,但首先接受到点击事件的是t2的上一层(也就是t1)。t1先接受到点击事件,触发相关的函数。然后终止,不再往下传递。这个就是非冒泡机制。
 
 
      现在,我们打开 AS3,舞台上的步骤相同。在第一帧写入代码如下:
      function p1(event:MouseEvent):void {
              trace("t1 click");
      }
      t1.addEventListener(MouseEvent.CLICK, p1);
 
      function p2(event:MouseEvent):void {
              trace("t2 click");
      }
      t1.t2.addEventListener(MouseEvent.CLICK, p2);
 
      运行后, t1和t2均能顺利触发。
 
      也就是说,在事件的捕获阶段,非冒泡机制,只要找到一个可以响应时间的函数,就停止了,不会再往下传递。但冒泡机制还会继续往下走,一直到底层为止。
      在事件的冒泡阶段,会按照冒泡顺序,一个个激发事件。如我们上面的那个例子,先激发的是 t2上的事件“t2 click”,接着才是激发t1上的事件“t1 click”。
 
      但是,冒泡机制也同样会产生一些问题,比如说上面的例子中, t1和t2都会触发,但如果我只想触发t2事件,不想触发t1事件,这时候怎么处理呢?这时候就要用到一些event类的方法,我这里先简单的给出代码,具体的我在以后的篇幅中还会介绍。
 
      function p1(event:MouseEvent):void {
              trace("t1 click");
      }
      t1.addEventListener(MouseEvent.CLICK, p1);
 
      function p2(event:MouseEvent):void {
              trace("t2 click");
              event.stopPropagation(); //阻止再冒泡
      }
      t1.t2.addEventListener(MouseEvent.CLICK, p2);
 
      以上代码运行后,只侦听到 t2,不再侦听t1事件。

 

你可能感兴趣的:(事件,职场,AS,冒泡,休闲)