4 important concepts any front end developer should know

20 July 2014 by Vinod Sobale No comments

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.

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.

Now, to creating a blank DocumentFragment

Let’s add our list items to it. Just a handful.

Our fragment is ready with the nodes we need. Let’s add them to the live DOM now

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

Vinod Sobale

Follow me on Twitter

Leave a Reply

Your email address will not be published. Required fields are marked *

Subscribe To Our Blog

Get access to proven marketing ideas, latest trends and best practices.

Next up home

Contact

Lets build cool stuff

Share your contact information & we will get in touch!

I want (Tell us more about your dream project)