Практическая разница между событиями rollOver/rollOut и mouseOver/mouseOut в AS 3.0

Итак, посмотрим, чем в ActionScript 3.0 события ROLL_OVER / ROLL_OUT отличаются от, казалось бы аналогичных, событий MOUSE_OVER / MOUSE_OUT. Для наглядности напишем два примера...

Пример с ROLL_OVER / ROLL_OUT:



import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.filters.GlowFilter;

var parentSprite:Sprite = new Sprite();
parentSprite.graphics.beginFill(0x000000,1);
parentSprite.graphics.drawRect(0,0,450,300);
parentSprite.graphics.endFill();
addChild(parentSprite);
parentSprite.x = 50;
parentSprite.y = 50;

parentSprite.addEventListener(MouseEvent.ROLL_OVER, onRollOverSprite);
parentSprite.addEventListener(MouseEvent.ROLL_OUT, onRollOutSprite);

var childSprite:Sprite = new Sprite();
childSprite.graphics.beginFill(0xffffff,1);
childSprite.graphics.drawRect(0,0,350,200);
childSprite.graphics.endFill();
parentSprite.addChild(childSprite);
childSprite.x = 50;
childSprite.y = 50;

function onRollOverSprite(event:MouseEvent):void
{
	event.target.filters = [new GlowFilter()];
}

function onRollOutSprite(event:MouseEvent):void
{
	event.target.filters = [];
}

Результат:

Пример с MOUSE_OVER / MOUSE_OUT:



import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.filters.GlowFilter;

var parentSprite:Sprite = new Sprite();
parentSprite.graphics.beginFill(0x000000,1);
parentSprite.graphics.drawRect(0,0,450,300);
parentSprite.graphics.endFill();
addChild(parentSprite);
parentSprite.x = 50;
parentSprite.y = 50;

parentSprite.addEventListener(MouseEvent.MOUSE_OVER, onMouseOverSprite);
parentSprite.addEventListener(MouseEvent.MOUSE_OUT, onMouseOutSprite);

var childSprite:Sprite = new Sprite();
childSprite.graphics.beginFill(0xffffff,1);
childSprite.graphics.drawRect(0,0,350,200);
childSprite.graphics.endFill();
parentSprite.addChild(childSprite);
childSprite.x = 50;
childSprite.y = 50;

function onMouseOverSprite(event:MouseEvent):void
{
	event.target.filters = [new GlowFilter()];
}

function onMouseOutSprite(event:MouseEvent):void
{
	event.target.filters = [];
}

Результат:

Оба примера почти полностью идентичны, но только в первом мы использовали события ROLL_OVER / ROLL_OUT, а во втором - события MOUSE_OVER / MOUSE_OUT. Но различие, как оказывается, не только в этом. Если поводить мышкой над приведёнными примерами, то заметите разницу: в случае с ROLL_OVER / ROLL_OUT вложенный объект-спрайт игнорируется и не подсвечивается, а в примере с MOUSE_OVER / MOUSE_OUT - наоборот. То есть всё различие между событиями ROLL_OVER / ROLL_OUT и событиями MOUSE_OVER / MOUSE_OUT заключается в реакции на эти события вложенных объектов. Причём, данная разница исчезнет, если свойству mouseChildren будет присвоено значение false (по-умолчанию у этого свойства стоит значение true)...

Пример с ROLL_OVER / ROLL_OUT и mouseChildren со значением false:



import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.filters.GlowFilter;

var parentSprite:Sprite = new Sprite();
parentSprite.graphics.beginFill(0x000000,1);
parentSprite.graphics.drawRect(0,0,450,300);
parentSprite.graphics.endFill();
addChild(parentSprite);
parentSprite.x = 50;
parentSprite.y = 50;

parentSprite.mouseChildren = false;

parentSprite.addEventListener(MouseEvent.ROLL_OVER, onRollOverSprite);
parentSprite.addEventListener(MouseEvent.ROLL_OUT, onRollOutSprite);

var childSprite:Sprite = new Sprite();
childSprite.graphics.beginFill(0xffffff,1);
childSprite.graphics.drawRect(0,0,350,200);
childSprite.graphics.endFill();
parentSprite.addChild(childSprite);
childSprite.x = 50;
childSprite.y = 50;

function onRollOverSprite(event:MouseEvent):void
{
	event.target.filters = [new GlowFilter()];
}

function onRollOutSprite(event:MouseEvent):void
{
	event.target.filters = [];
}

Результат:

Пример с MOUSE_OVER / MOUSE_OUT и mouseChildren со значением false:



import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.filters.GlowFilter;

var parentSprite:Sprite = new Sprite();
parentSprite.graphics.beginFill(0x000000,1);
parentSprite.graphics.drawRect(0,0,450,300);
parentSprite.graphics.endFill();
addChild(parentSprite);
parentSprite.x = 50;
parentSprite.y = 50;

parentSprite.mouseChildren = false;

parentSprite.addEventListener(MouseEvent.MOUSE_OVER, onMouseOverSprite);
parentSprite.addEventListener(MouseEvent.MOUSE_OUT, onMouseOutSprite);

var childSprite:Sprite = new Sprite();
childSprite.graphics.beginFill(0xffffff,1);
childSprite.graphics.drawRect(0,0,350,200);
childSprite.graphics.endFill();
parentSprite.addChild(childSprite);
childSprite.x = 50;
childSprite.y = 50;

function onMouseOverSprite(event:MouseEvent):void
{
	event.target.filters = [new GlowFilter()];
}

function onMouseOutSprite(event:MouseEvent):void
{
	event.target.filters = [];
}

Результат:

Как видите, хотя в двух последних случаях и используются разные события, но практической разницы между ними уже нет.

Автор: admin

Дата добавления: 2013-10-23

Рейтинг поста: 10