questions5

Question 1

[Bubbling] How should we go if we want that any new additional element in the dom tree has a click handler?

Answer 1

We have two variants, add the EventListener directly on a newly created element or with event delegation.

Question 2

event delegation

Answer 2

It`s a pattern when instead of assigning EventListeners on each element we are assigning it to the common ancestor element. In the handler, we are getting e.target to check where the event has actually happened and handle it.

Question 3

[Capturing] In which order will these handlers be invoked? How could we change this order?
document.querySelector(‘body’).addEventListener(‘click’, callback1); document.querySelector(‘button’).addEventListener(‘click’, callback2);

Answer 3

Button first then Body. We need to give a 3rd parameter true to tern on the Capturing so the Body will be first and then the button

Question 4

StopPropagation()

Answer 4

event.stopPropagation() stops the move upwards, but on the current element all other handlers will run.
To stop the bubbling and prevent handlers on the current element from running, there’s a method event.stopImmediatePropagation(). After it no other handlers execute.

Question 5

PreventDefault()

Answer 5

gives you the ability to prevent a browser’s default behavior for events.
for example, when you click on a checkbox it’ll toggle the check. However, if you use preventDefault it will actually stop the browser from doing that.
You can use preventDefault on all sorts of different HTML elements.
There are some events that the browser can’t prevent from happening. For example, events like scroll and wheel (for mouse wheel events!)

Question 6

Target and Current Target difference

Answer 6

event. target – the deepest element that originated the event.
event. currentTarget (=this) – the current element that handles the event (the one that has the handler on it)

Question 7

bubbling

Answer 7

events “bubble” from the inner element up through parents

Question 8

event.target

Answer 8

e.target is the actual element inside the form that was clicked.

this – is the “current” element, the one that has a currently running handler on it.