Functia addEventListener

Functia ataseaza unui obiect un “listener” care va apela o functie cand un anumit eveniment este declansat.

objTest.addEventListener(‘click’, onClickHandler);

Exemplu de mai sus ataseaza obiectului objTest un “listener” care, atunci cand apasam pe obiectul objTest, apeleaza functia onClickHandler, in interiorul caruia se poate trata sau nu evenimentul. Primul parametru este de tip String si defineste tipul evenimentului, iar al doilea este de tip Function si este reprezentat de o functie care este apelata cand se declanseaza evenimentul.
In afara de primii 2 parametri, care sunt si obligatorii, mai exista inca 3 care au valori prestabilite, si pot fi, sau nu, mentionati in apelul functiei.

Al 3-lea parametru, numit si useCapture, este de tip Boolean si are valoarea initiala false. Pentru a intelege rolul acestui parametru trebuie intelese care sunt fazele prin care trece un eveniment. De la declansare, un eveniment trece prin 3 faze (in ordine cronologica):

  1. bubbling phase,
  2. target phase,
  3. capturing phase.

Daca valoarea parametrului useCapture este false (valoare initiala), atunci evenimentul va fi capturat in capturing phase, iar daca useCapture este true evenimentul va fi capturat in bubbling phase.

Ex 1:
addEventListener(‘click’, onClickHandler1, false);
objTest.addEventListener(‘click’, onClickHandler2);
function onClickHandler1(e):void{
trace(“eveniment declansat pe scena“)
}
function onClickHandler2(e):void{
trace(“eveniment declansat in obiectul objTest“)
}
//rezultat:
//eveniment declansat in obiectul objTest
//eveniment declansat pe scena

Ex 2:
addEventListener(‘click’, onClickHandler1, true);
objTest.addEventListener(‘click’, onClickHandler2);
function onClickHandler1(e):void{
trace(“eveniment declansat pe scena“)
}
function onClickHandler2(e):void{
trace(“eveniment declansat in obiectul objTest“)
}
//rezultat:
//eveniment declansat pe scena
//eveniment declansat in obiectul objTest

mai multe: Advanced event registration models

Event order

Exemplu:
var el = document.createElement(“input“);
AttachEvents(el,”change“,DoSomething,false,idx);

function AttachEvents(obj,evt,fnc,useCapture, idx){
evt = evt.toLowerCase();
if (obj.addEventListener){
obj.addEventListener(evt,fnc,useCapture);obj.idx=idx;
}else if(obj.attachEvent){
obj.attachEvent(‘on’+evt,fnc); obj.idx=idx;
}
return true;
}

function DoSomething(obj){
// “target” for Mozilla, Netscape, Firefox et al. ; “srcElement” for IE
prop_var = “idx“; prop = “target“;
if(navigator.appName == “Microsoft Internet Explorer“) {prop = “srcElement“;}
idx = obj[prop][prop_var];
textBox = document.getElementById(idx);
}

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s