Interview question

How do you prevent default browser behavior for an event? किसी event के लिए default browser behavior कैसे रोकें?

Answer

event.preventDefault() stops the browser's built-in default action for an event, such as following a link or submitting a form, while still allowing the event to propagate.

// Preventing form submission to handle it with JavaScript instead
const form = document.querySelector('form');
form.addEventListener('submit', function(event) {
    event.preventDefault(); // stops the page from reloading
    const formData = new FormData(form);
    console.log('Form data:', Object.fromEntries(formData));
    // Send via fetch() instead
});

// Preventing a link from navigating
const link = document.querySelector('a');
link.addEventListener('click', function(event) {
    event.preventDefault();
    console.log('Link clicked but navigation prevented');
});

// Preventing right-click context menu
document.addEventListener('contextmenu', function(event) {
    event.preventDefault();
});

// Preventing certain key presses
document.addEventListener('keydown', function(event) {
    if (event.key === 'F5') {
        event.preventDefault(); // block page refresh via F5
    }
});

// Difference between preventDefault() and stopPropagation()
btn.addEventListener('click', (event) => {
    event.preventDefault();  // stops the BROWSER's default action
    event.stopPropagation(); // stops the event from BUBBLING to parents
    // These solve different problems and are often used together but are not the same thing
});

// Checking if preventDefault was called
function handler(event) {
    event.preventDefault();
    console.log(event.defaultPrevented); // true

event.preventDefault() event के लिए browser के built-in default action को रोकता है, जैसे link follow करना या form submit करना, event propagation को नहीं रोकता।

const form = document.querySelector('form');
form.addEventListener('submit', function(event) {
    event.preventDefault(); // page reload रोकता है
    const formData = new FormData(form);
    console.log('Data:', Object.fromEntries(formData));
});

const link = document.querySelector('a');
link.addEventListener('click', function(event) {
    event.preventDefault();
    console.log('Navigation रुक गया');
});

// Right-click context menu रोकना
document.addEventListener('contextmenu', function(event) {
    event.preventDefault();
});

// preventDefault() और stopPropagation() में अंतर
btn.addEventListener('click', (event) => {
    event.preventDefault();  // browser के default action को रोकता है
    event.stopPropagation(); // bubbling को रोकता है
    // दोनों अलग-अलग problems solve करते हैं
});

Was this answer clear?

Subjects

Related questions