按照官方的事件流图解
实例讲解:
初始化:
设舞台、父节点、Child1节点、Child2节点都是显示对象。
然后做如下操作:
舞台.addChild(父节点); 父节点.addChild(Child1节点); 父节点.addChild(Child2节点); 父节点.addEventListener(MouseEvent.MOUSE_DOWN, function, false); Child1节点.addEventListener(MouseEvent.MOUSE_DOWN, function);
父节点和Child1节点分别添加了鼠标事件侦听器。
演示:
如果我点击Child1节点,Child1节点便发出一个MouseEvent事件(这就是我们的主角)
dispatchEvent(new MouseEvent());
接着该MouseEvent便开始了它的“旅程”,寻找它的侦听器们。
先说下这个MouseEvent的旅程(三个阶段):
1.这个MouseEvent从舞台出发,经过父节点,直到快要到达目的地Child1节点(它的出生地);
-----------这个过程就是捕获阶段;
2.然后它经过Child1节点(它的出生地);
-----------这个过程就是目标阶段;
3.最后原路返回,经过父节点,回到舞台;
-----------这个过程就是冒泡阶段。
上面蓝色的字就是MouseEvent途中经过的节点。
舞台→父节点→Child1节点→父节点→舞台
还可以设置减少MouseEvent的路程,只要设置bubbles:Boolean = false;
MouseEvent就只走捕获阶段和目标阶段,而不走冒泡阶段了。
需要注意的是(MouseEvent和KeyboardEvent的bubbles默认为true,而Event的bubbles默认是false);
下面说下这个MouseEvent的任务(寻找它的侦听器们):
我们已经分别在父节点和Child1节点上添加了MouseEvent的侦听器(利用addEventListener)
但是这些侦听器都有些怪脾气,父节点上的侦听器只在目标阶段和冒泡阶段才接收MouseEvent事件,
捕获阶段就是经过了也不理睬。
究其缘由是因为在addEventListener的时候默认设置了useCapture:Boolean = false;
如果设置为true,那就只在捕获阶段接收MouseEvent,
那如果要让父节点在所有阶段都接收MouseEvent事件呢?
那就只好弄两个侦听器了,一个在捕获阶段接收,一个在目标冒泡阶段接收。
如下:
父节点.addEventListener(MouseEvent.MOUSE_DOWN, function, false); 父节点.addEventListener(MouseEvent.MOUSE_DOWN, function, true);
最后要记住,事件要途经注册侦听器的节点,并且该侦听器要同意在此阶段接受该事件,侦听器函数才会执行。