4 important concepts any front end developer should know

Note: I picked these 4 concepts because I feel they would build a strong foundation of understanding for you and it is entirely my opinion and I also understand that every front end developer may not feel the same way. Also, the purpose of this article is to only briefly explain about these concepts so you can dig deeper when you know enough.

  1. Event Propagation
  2. Event Delegation
  3. Document Fragment
  4. CSS Specificity
Let’s begin…

Event Propagation

Event dispatching in DOM tree - (image source - W3C)

Event dispatching in DOM tree – (image source – W3C)

  • Event (event object) must determine the propagation path (refer to the diagram below) before dispatching.
  • Once determined, although target element has either been moved or changed in the DOM tree, propagation path doesn’t change for the event implementation to work properly.
  • Event object must pass through 3 phases. Capture, Target and Bubble.
  • All 3 events can be skipped if Event.stopPropagation() is called before event is dispatched.
  1. Capture phase: When event is dispatched from the top it must handle all listeners that it finds on the way down (Note: Only if EventListener method has userCapture set to true)
  2. Target phase: In this phase, event object finds the event target (event.target) and handles listeners registered on it.
  3. Bubble phase: Event object travels (propagates) in back to the top, handling listeners registered on it. (Note: Only if EventListener method has userCapture set to false)
Example – Bin

Event Delegation

Now, Event Delegation is one of the easiest and most interesting concepts. With Event Delegation, one doesn’t have to register event listeners for the element nodes that don’t exist in the DOM tree. One simply does it by registering one on the the parent. For example, I have an unordered list that gets refreshed every second and a new list item may get added to it. Now, registering event listeners to each of these list items is simply not practical considering there could be hundreds of them or thousands. What do you do then?

Solution:

  1. We register an event listener to their parent which is UL, an unordered list.
  2. When the event occurs, we perform a check for whether the user has actually clicked on any LI.
  3. Perform a task.
Now, this will save you from creating separate event listeners from each of the LI nodes and just one event listener will do the trick.
<html>
<head>
<meta charset=“utf-8“>
<title>JS Bin</title>
</head>
<body>
<ul id=“list“>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
var list = document.querySelector(“#list“),
str = ‘‘;
list.addEventListener(“click“,function(event) {
if(event.target && event.target.nodeName == “LI“) {
alert(event.target.textContent);
}
});
// new LI gets appended after 3 seconds and our event is registered on it.
window.setTimeout(function(){
var li = document.createElement(‘li‘);
li.textContent = ‘item 4‘;
list.appendChild(li);
}, 3000);
</script>
</body>
</html>
view rawevent-delegation.html hosted with ❤ by GitHub

DocumentFragment

DocumentFragment is a light, parentless document just like the one you already know except it doesn’t exist until you create it and is not a part of the live DOM. It acts as a third-party container that takes nodes, stores them and allows you to append them effortlessly to your visible, live DOM with tremendous performance improvements. Here’s the proof Performance Test

How to?

Let’s say, you want to append some list items to the unordered list which already exists in your DOM.
<ul id=“list“></ul>
view rawunordered-list.htm hosted with ❤ by GitHub
Now, to creating a blank DocumentFragment
// Create the fragment
var myFrag = document.createDocumentFragment();
view rawblack-fragment.js hosted with ❤ by GitHub
Let’s add our list items to it. Just a handful.
// List items and adding them to our fragment
for(x = 0; x < 10; x++) {
var li = document.createElement(“li“);
li.innerHTML = “List item “ + x;
myFrag.appendChild(li);
}
view rawlist-items.js hosted with ❤ by GitHub
Our fragment is ready with the nodes we need. Let’s add them to the live DOM now
// Adding the fragment full of nodes to the unordered list
listNode.appendChild(myFrag);
view rawaddition-of-fragment.js hosted with ❤ by GitHub
Using DocumentFragments is really a very efficient method of DOM manipulation with an amazing performance boost. For detailed reference

CSS Specificity

Now this is not only an interesting topic to know about, but also a very enlightening one at that. Specificity has predefined weights for all elements and these weights decide which rule will be applied by the browsers. We have already written an article on it. Read it here

Share this post