Event bubbling

★ Open events/eventBubbling.html.

<div id="bubble">
    <ul>
        <li>item 0: Ullamco laboris nisi quis nostrud exercitation</li>
        <li>item 1: <a href="javascript:;">link 0</ex ...</li>
        <li>item 2: Sunt in <a href="javascript:;">link1</a>...</li>
    </ul>
</div>
.....
<script>
$(function() {
    $('#bubble a').click(function() { 
        alert('U klikte op een a-tag');
    });
    $('#bubble li').click(function() { 
        alert('U klikte op een li-tag');
    });
    $('#bubble ul').click(function() { 
        alert('U klikte op een ul-tag');
    });
});
</script>

Deze pagina bevat een lijst met daarin enkele links. In de code vindt u een click-event op de a-tag, op de li-tag en op de ul-tag.

★ Open de pagina in een browser en klik op een link. ★ Welke events worden getriggerd?

U zal merken dat de drie events getriggerd worden. In JavaScript is het namelijk zo dat een event niet enkel getriggerd wordt op de bedoelde selector, maar dat het event eveneens wordt doorgegeven aan alle parent elementen. Dit effect noemt men event bubbling. Het event borrelt als het ware door het DOM naar boven. Omdat de parent elementen li en ul eveneens aan een click-event gekoppeld zijn, worden deze events ook uitgevoerd. Indien u in het ontwerp geen rekening houdt met event bubbling, kan dit wel eens tot onverwachte resultaten leiden.