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.
- Event Propagation
- Event Delegation
- Document Fragment
- CSS Specificity
Let’s begin…
Event Propagation
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.
- 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)
- Target phase: In this phase, event object finds the event target (event.target) and handles listeners registered on it.
- 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:
- We register an event listener to their parent which is UL, an unordered list.
- When the event occurs, we perform a check for whether the user has actually clicked on any LI.
- 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> |
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
|
// Create the fragment |
|
var myFrag = document.createDocumentFragment(); |
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); |
|
} |
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); |
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