Question

If the <footer> is clicked what is the order that the iceCream() function goes through ?

CODE:

const pageFooter = document.querySelector('#page-footer');

pageFooter.addEventListener('click',function iceCream(){
const footerDetails = document.querySelector('#details');

footerDetails.textContent = 'Everyone should eat ice cream!';
});

( ) Call stack, Queue, Browser
( ) Browser, Call stack, Queue
( ) Call stack only
( ) Browser, Queue, Call stack

OBS I: If it is possible to explain the reason for the choice(s) and why the other options are incorrect I would be grateful

OBS II: Why the option Call Stack only is right

Answer 1

Solution:-

(c) Call Stack only

Explanation:-When an event happens on an element, it first runs the handlers on it, then on its parent, then all the way up on other ancestors.

You, the web developer, can choose whether to register an event handler in the capturing or in the bubbling phase. This is done through the addEventListener() method explained on the Advanced models' page. If its last argument is true the event handler is set for the capturing phase, if it is false the event handler is set for the bubbling phase.

If the user clicks on <footer> the following happens:

1. The click event starts in the capturing phase. The event looks if any ancestor element of pageFooter has a onclick event handler for the capturing phase.
2. The event finds one on footerDetails iceCream() is executed.
3. The event travels down to the target itself, no more event handlers for the capturing phase are found. The event moves to its bubbling phase and executes iceCream() , which is registered to footerDetails for the bubbling phase.
4. The event travels upwards again and checks if any ancestor element of the target has an event handler for the bubbling phase. This is not the case, so nothing happens.