Event Propagation and Event Delegation
This flow occurs when an event takes place such as a click, hover, or mousedown. The function is then triggered on each part of each stage of each flow. That was a mouthful. But think of it this way, starting from the topmost to the bottom and back from the bottom to the top (3 -> 2 -> 1 -> 1 -> 2 -> 3). Event capturing first then event bubbling.
<div onclick="foo(this)">3 <div onclick="foo(this)">2 <div onclick="foo(this)">1</div> </div> </div>
So each capture down and each bubble up would trigger an onclick and the resulting function
foo(this) if the inner most div (with innerText = “1”) was clicked. The scope of
this will then change depending on when it was called since
this is not assigned a value until the function has been...
Continue reading →