W pierwszej części Tu Haczyk IStnieje omówiłem sposób wykorzystania metody bind, tak aby panować nad zawartością this bez względu na kontekst wywołania funkcji.
W drugiej części przyjrzymy się wykorzystaniu this do obsługi zdarzeń oraz metodzie bindAsEventListener, która jest szczególnym przypadkiem bind.
Rozpatrzymy następującą listę trzech elementów oraz kawałek CSSa:
<style>
li {padding: 1em; width: 5em; background-color: darkblue; }
span {color: white; background-color: darkgreen;}
.active {color: red; background-color: yellow; }
</style>
<ul id="list">
<li><span><strong>Stan</strong></span></li>
<li><span><em>Kyle</em></span></li>
<li><span>Kenny</span></li>
</ul>
Przypadek 1.
Standardowy przykład użycia this to zarejestrowanie zdarzenia click na wszystkich elementach listy. Warto zwrócić uwagę na to, że o ile obiekt zdarzenia e w metodzie element zwraca kliknięty element (strong,em, span, li) o tyle w this jest zawsze element listy li.
$$('#list > li').invoke('observe','click',list);
function list(e){
$$('#list > li').invoke('removeClassName','active');
this.addClassName('active');
console.info(this,e.element());
}
/*
<li class="active"> <strong>
<li class="active"> <em>
<li class="active"> <span>
<li class="active"> <li class="active">
*/
Przypadek 2.
W tym przypadku, użyjemy metody bind podobnie jak w poprzedniej części.
Do funkcji list dołączyliśmy nią samą, dlatego wewnątrz list – this wskazuje na list. Niedługo zaprezentuje przykład zastosowania bind na rzeczywistym przykładzie.
$$('#list > li')
.invoke('observe','click',list.bind(list))
function list(e){
console.info(this,e.element());
}
/*
list(e) <li>
list(e) <strong>
list(e) <em>
list(e) <span>
*/
Przypadek 3.
Metoda bindAsEventListener jest rozwinięciem bind i dba o to, żeby obiekt zdarzenia e był zwrócony na pierwszym miejscu, a później dopiero ewentualne parametry tak jak w tym przykładzie Parametr1.
$$('#list > li').invoke('observe','click',
list.bindAsEventListener(list,'Parametr1'))
function list(e,par){
console.info(this,par,e.element());
}
/*
list(e, par) Parametr1 <li>
list(e, par) Parametr1 <strong>
list(e, par) Parametr1 <em>
list(e, par) Parametr1 <span>
*/
Podsumowanie
W ostatnich dwóch wpisach omówiłem this oraz metody bind i bindAsEventListener. Teraz będę mógł przedstawić ich przykładowe zastosowanie w praktyce.
