#event capturing

Event delegation is when you attach a listener to an element, all of its children will also be able to trigger that listener. An example would be if you had a <ul></ul> of 10 <li></li> . You would just need to have one event listener on the <ul></ul>.

Event bubbling and capturing are two ways of propagation.

Bubbling means that when a child and parent both have an event listener for the same event, the child handles the event before the parent.

Let’s assume that there are the same events attached to an element and its some parent elements. Which event will be executed at first? Or what is the event order?

Example

Event capturing and bubbling

Click Me

// Variables var container = document.getElementById('container'); var article = document.getElementById('article'); var paragraph =…