Added Interview Questions Folder

InterviewQuestions/EventBubbling.js

@@ -0,0 +1,31 @@
+// Event Bubbling and Capturing
+//when you have a nested elements in the dom and when you add a event to the last child it will follow pattern
+// as that child to till the parent
+// whereas in capturing the process is reverse
+
+// The process of propagating from nearest element to farthest element in the dom is called "EVENT BUBBLING"
+// The process of propagating from farthest element to nearest element in the dom is called "EVENT CAPTURING"
+// EVENT CAPTURING is also called as "TRICKLING"
+// stopPropagation() will stop the propagation either in event bubbling or in event capturing.
+
+
+const grandParent = document.getElementById('grand-parent');
+const parent = document.getElementById('parent');
+const child = document.getElementById('child');
+
+
+grandParent.addEventListener('click',() => {
+    console.log("Grand-Parent")
+},true)
+// The true argument refers to the event capturing and true says that implement capturing.
+
+parent.addEventListener('click',() => {
+    console.log("parent")
+},true)
+
+child.addEventListener('click',() => {
+    console.log("child")
+},true)
+
+// In the above example  in the case of false argument the event bubbling will occur and if you click on 
+//child div all the three log statements will appear because of the effect of event bubbling