# Event bubbling

{% hint style="success" %}
★ Open **events/eventBubbling.html**.
{% endhint %}

```markup
<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.

{% hint style="success" %}
★ Open de pagina in een browser en klik op een link.\
★ Welke events worden getriggerd?
{% endhint %}

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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://1itf.gitbook.io/jquery/6-events/event-bubbling.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.