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 →