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 invoked while the
event.target remains the same throughout the event propagation as the originating element clicked.
thisis the current element
targetis the originating element
- First stage of event propagation
- Event captures from top to bottom elements
- This stage does not occur in IE <9
- Second stage of event propagation
- Event bubbles from bottom to top elements
onblurevents don’t bubble up
Typically when building webapps a component would have a list part. There would be no need to attach an event listener to each list item, rather it would be more efficient to listen to the list itself (
ul). Then using event delegation by checking the event’s target (
event.target) to determine if the user has indeed clicked on a list item (
li) part of the list. If the user has then we trigger the delegated function, for example, adding a check mark to the list item when selected.
- Add event listener to the parent element
Some browsers are not W3C-compliant, such as versions of IE and Netscape. To address this, some polyfilling must be performed or inputting cross-browser code.
Events are stopped by
event.cancelBubble = true; // IE event.stopPropagation(); // All other W3C-compliant browsers
Event targets are from a hybrid approach since IE takes it from srcElement
var target = event.target || event.srcElement;