keemor.com
Surfin' JavaScript Wave

Tu Haczyk IStnieje – this cz. II

keemor~1 czerwca 2009 /Javascript/Prototype

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 listthis 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.