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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
//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:
|
1 2 |
<div class="przycisk-1"><div> <div class="przycisk-2"></div> |
natomiast kiedy jeden zawiera się w drugim, jak przedstawiono poniżej
|
1 2 3 |
<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