Interview question

How do you add and remove event listeners in JavaScript? JavaScript में event listeners add और remove कैसे करें?

Answer

addEventListener() attaches a function to run when an event occurs, and removeEventListener() detaches it. Both require the exact same function reference to work together.

const button = document.querySelector('button');

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

// Removing - MUST use the same named function reference
button.removeEventListener('click', handleClick);

// This does NOT work - anonymous functions can't be removed
button.addEventListener('click', () => console.log('clicked'));
button.removeEventListener('click', () => console.log('clicked')); // different reference, does nothing

// Adding multiple listeners for the same event - all execute
button.addEventListener('click', () => console.log('Handler 1'));
button.addEventListener('click', () => console.log('Handler 2'));

// Listener options
button.addEventListener('click', handleClick, {
    once: true,     // automatically removes itself after firing once
    passive: true,   // tells browser this won't call preventDefault (perf boost for scroll/touch)
    capture: false    // whether to listen during capture phase (default: bubble phase)
});

// Old-style (inline / on-property) - generally avoided in modern code
button.onclick = function() {
    console.log('Only one handler possible this way - overwrites previous');
};

// Cleanup pattern for dynamically created elements
function setupTemporaryListener(element) {
    const handler = () => console.log('Temp click');
    element.addEventListener('click', handler);
    return () => element.removeEventListener('click', handler); // cleanup function
}
const cleanup = setupTemporaryListener(button);
// later: cleanup();

addEventListener() event होने पर चलने वाला function attach करता है, और removeEventListener() इसे detach करता है। दोनों को same function reference चाहिए।

const button = document.querySelector('button');

function handleClick(event) {
    console.log('Clicked!', event.target);
}
button.addEventListener('click', handleClick);

// Same function reference से remove
button.removeEventListener('click', handleClick);

// यह काम नहीं करता - anonymous functions remove नहीं हो सकते
button.addEventListener('click', () => console.log('clicked'));
button.removeEventListener('click', () => console.log('clicked')); // अलग reference

// Multiple listeners - सभी चलते हैं
button.addEventListener('click', () => console.log('Handler 1'));
button.addEventListener('click', () => console.log('Handler 2'));

// Listener options
button.addEventListener('click', handleClick, {
    once: true,
    passive: true,
    capture: false
});

// Cleanup pattern
function setupTemp(element) {
    const handler = () => console.log('Temp click');
    element.addEventListener('click', handler);
    return () => element.removeEventListener('click', handler);
}
const cleanup = setupTemp(button);

Was this answer clear?

Subjects

Related questions