Przypisywanie i uruchamianie eventów
Najprostszą metodą tworzenia zdarzeń w obrębie strony internetowej jest przypisywanie akcji (funkcji) bezpośrednio do odpowiednich elementów strony, np.
|
|
//JavaScript var element = document.getElementById('przycisk'); element.onclick = function() { console.log('kliknięto'); } //JQuery $('#przycisk').click(function(event){ console.log('kliknięto'); }); $('#przycisk').bind('click', function(event){ console.log('kliknięto'); }); |
Każdy z powyższych przykładów robi dokładnie to samo (aczkolwiek nie tak samo) – nadaje event, w wyniku którego po naciśnięciu elementu
#przycisk w konsoli pokaże się napis kliknięto. Tym prostym sposobem można przypisać zdarzenia wszystkim elementom, które powinny zmieniać stan strony. To rozwiązanie nie rodzi trudności, kiedy elementy posiadające zdarzenie są rozłączne:
|
|
<div class="przycisk-1"><div> <div class="przycisk-2"></div> |
natomiast kiedy jeden zawiera się w drugim, jak przedstawiono poniżej
|
|
<div class="przycisk-1"> <div class="przycisk-2"></div> </div> |
rodzi się pytanie: Które zdarzenie powinno uruchomić się najpierw w przypadku kliknięcia myszką na elemencie
.przycisk-2? Czy najpierw zdarzenie dla
.przycisk-1 a później dla
.przycisk-2 czy też odwrotnie? Czytaj dalej →