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

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

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

     

       然后我们在第一帧写入代码如下：

      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事件。