Javascript Interview Questions Part 3 || Vanilla Javascript Questions
First of all, if you are interested in joining our Free session to answer your coding, career questions. Kindly fill out this form to join the community of CODE Culture Pro https://forms.gle/kjU3PWhwQy16Tghe9
Here’s the 3rd part of my JavaScript Interview Questions series. If you haven’t seen Part 1 and Part 2 yet, go to my Profile Guides and you will find the series.
If you enjoy this post, please like and share it with others. I will really appreciate it.
Let’s look at more questions you can be asked in JavaScript interviews with their answers.
1. What is Event Bubbling in JS?
Event bubbling is a term in the DOM where the event an element receives is bubbled (transmitted) to its parent and ancestors' elements (upward in the DOM tree).
Look at this example.
The button is a child of a span which is a child of a div.
//Code
<div>
<span>
<button>Click Me!</button>
</span>
</div>
When you click the button, the event is bubbled to the span element and the div element (the ancestors). So the div element can also handle the such an event (that originally occurred on the button) due to Event Bubbling.
2. What is Event Delegation?
Event Delegation is a concept (based on Event Bubbling) that allows you to handle an event on a parent element instead of the original element that receives the event. Basically, you delegate the handling of that event to the parent element.
//Code
<div id=”div”>
<button>Click Me!</button>
<button>Also Click Me!</button>
</div>
//Code
const div = document.getElementById(“div”)
div.addEventListener(“click”, () => {
console.log(“button clicked”)
})
In this example, you see we delegate the handling of the click event to the div. So when the first or second button is clicked, the div handles the event. This could be better than adding the event handler to the two buttons.
3. Share 3 ways of handling events in JS?
Inline Event Handlers: where the handling function is attached to the event attribute on the element.
//Code
<button onclick=”handler()”></button>
AddEventListener: this method on element objects allows you to add functions for events.
//Code
const button = document.getElementById(“button”)
button.addEventListener(“click”, handler)
Event Handler Property: you can assign function handlers to event properties of the element object.
//Code
const button = document.getElementById(“button”)
button.onclick= handler
4. What is the function of event.preventDefault?
Some elements have default behaviors when an event is triggered on them. For example, when you submit a form, it sends the form data to the URL you provide on the action attribute of the form. When you click a link, the browser navigates to the value of the href attribute.
The event.preventDefault method stops these default behaviors.
By using the method here, clicking on such a link will not do anything (no navigation).
//Code
const link = document.getElementById(“link”)
link.addEventListener(“click”, (event) => {
event.preventDefault()
})
5. What is the function of event.stopPropagation?
This method stops the propagation of events (which is the case of event bubbling).
In some cases, you do not want the parent element to receive an event that the child element receives. By using stopPropagation for an event on the child element, that event will not bubble to its parent or ancestors.
Here, the div will not receive the click event anymore.
//Code
<div>
<button id=”button”></button>
</div>
//Code
const button = document.getElementById(“button”)
button.addEventListener(“click”, (event) => {
event.stopPropagation()
})
If you have any questions regarding anything. Just ping me on Instagram at https://www.instagram.com/codeculturepro/ or at codeculturepro@gmail.com
