Ползване на един event listener за контрол над много елементи
Публикувана от smilev на January 12 2011 10:56:24

---

---

Разширена новина

---

Урокът се отнася за AS3.0.Аз съм ползвал Flex framework, но същото може да бъде направено най-спокойно и във флаш.

Ползването на един event listener за много бутони, които правят различни действия е полезно откъм код.Event listener-а е функция, която "слуша" кога дадено събитие е настъпило на сцената.
Пример : Бутон се натиска , евент-а се dispatchva и тръгва по апликацията.Функцията улавя това събитие и действа нататък с написания код.

Цялата работа е доста лесна и става по следния начин :
function clickEventListener(event:MouseEvent) {
trace(event.target.label);
}
Аргументът на фукнцията - event, който е от тип MouseEvent може да ползва специалните си функции, за да се определи кой бутон е натиснат.
Ето и примерен код от Flex framework с коментари:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical">

<mx:Script>
<![CDATA[
private function doClick(event:MouseEvent):void {
output.text += event.target.label + ' was clicked ' + '\n'

// funkciqta e private --> moje da se izpolzva samo v tozi dokument/class
// funkciqta priema za parametyr event ot tip MouseEvent, kato 4rez nego opredelqme
// koi button e natisnat.Tova moje da bude mnogo polezno v redica ot slu4ai!
//Funkciqta 6te deistva i s event:Event, tyi kato MouseEvent nasledqva vsi4ki metodi na Event class-a
//no MouseEvent ima metodi, koito se otnasqt samo kym nego!
}
>>
</mx:Script>
<mx:HBox>
<mx:Button label="The big bad green buttton"
click="doClick(event)"
height="31"
fillAlphas="[1.0, 1.0]"
fillColors="[#56E119, #4BC017]"
cornerRadius="11"/>
<mx:Button label="The even badder yellow button" click="doClick(event)"
height="31"
fillAlphas="[1.0, 1.0]"
fillColors="[#EBDF25, #F6EB3B]" cornerRadius="11"/>

<mx:Button label="Click the red !"
click="doClick(event)"
cornerRadius="11"
height="31"
fillAlphas="[1.0, 1.0]"
fillColors="[#F11111, #F54343]"/>
<mx:Button label="the small blue button"
click="doClick(event)"
cornerRadius="11"
fillAlphas="[1.0, 1.0]"
fillColors="[#5173F5, #798AF1]"/>
</mx:HBox>
<!-- Text area-ta 6te sluji kato konzola za output.Zadadeni sa i id, viso4ina i 6iro4ina. -->
<mx:TextArea id="output" width="396" height="151" />

</mx:Application>


Кратко обяснение : бутона задава event listener на click event-a чрез click="function(event)", a функцията се намира във скрипт блока.
Чрез event.target посочваме обекта ( бутона ), а чрез .label вече може да имаме по-голяма точност.
Същото може да стане и с event.target.id
Това може да бъде полезно както за 1 бутон, за да се обърнем към него, така и за много бутони, за да се изпълни кода в една функция.
Във флаш ще използвате button.addEventListener(MouseEvent.CLICK, onClick)

Ето и демо, за да стане по-ясно :

Demol