What is the difference between callback and event listener? Callback और event listener में क्या अंतर है?

Both callbacks and event listeners use similar mechanisms, but they have different contexts and purposes. An event listener is a type of callback specifically designed for responding to events.

// Callback - general purpose function passed as argument
function process(data, callback) {
    // Do some processing
    const result = data * 2;
    // Call the callback with result
    callback(result);
}

process(5, function(result) {
    console.log('Result:', result); // Result: 10
});

// Event listener - specific to DOM events
const button = document.querySelector('button');

// Adding event listener
button.addEventListener('click', function(event) {
    console.log('Button clicked!', event);
});

// Key differences:
// 1. Callbacks are called manually
// 2. Event listeners are called automatically by the browser

// Example: Manual callback
function fetchData(url, onSuccess, onError) {
    // Simulating async operation
    setTimeout(() => {
        if (url) {
            onSuccess({ id: 1, name: 'John' });
        } else {
            onError('Invalid URL');
        }
    }, 1000);
}

fetchData('/api/user', 
    function(data) { // onSuccess callback
        console.log('Data:', data);
    },
    function(error) { // onError callback
        console.log('Error:', error);
    }
);

// Event listener - triggered by user action
const form = document.querySelector('form');

form.addEventListener('submit', function(event) {
    event.preventDefault();
    console.log('Form submitted!');
});

input.addEventListener('input', function(event) {
    console.log('Input value:', event.target.value);
});

// Multiple callbacks vs Multiple event listeners
// Callbacks - must be passed
function task(onComplete) {
    console.log('Task running');
    onComplete();
}

task(() => console.log('Task 1 complete'));

// Event listeners - can add multiple
button.addEventListener('click', () => console.log('Handler 1'));
button.addEventListener('click', () => console.log('Handler 2'));
button.addEventListener('click', () => console.log('Handler 3'));
// All three will execute when button is clicked

// Event listener with event object
button.addEventListener('click', function(event) {
    console.log('Event type:', event.type);      // 'click'
    console.log('Target:', event.target);         // the button element
    console.log('Timestamp:', event.timestamp);   // when event occurred
});

// Removing event listeners
function handleClick() {
    console.log('Clicked!');
}

button.addEventListener('click', handleClick);

// Later, remove the listener
button.removeEventListener('click', handleClick);

// Event delegation using event listener
const list = document.querySelector('ul');

list.addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
        console.log('List item clicked:', event.target.textContent);
    }
});

// Callback in promise chain
function getData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve({ id: 1, name: 'John' });
        }, 1000);
    });
}

getData().then(function(data) { // then callback
    console.log('Data:', data);
}).catch(function(error) { // catch callback
    console.log('Error:', error);
});

Interview tip: Explain that event listeners are built on top of callbacks but are designed specifically for the DOM event system. While callbacks are general-purpose, event listeners have special features like the event object, event delegation, and removal capability. Both achieve the same goal of 'deferred execution' but in different contexts.