Interview question

How do you work with the event object's target, currentTarget, and this? Event object के target, currentTarget, और this के साथ कैसे काम करें?

Answer

These three often get confused but refer to different things during event handling, especially important when using event delegation.

Property	Refers to
event.target	The actual element that triggered the event (deepest element)
event.currentTarget	The element the listener is attached to
this (in regular function)	Same as event.currentTarget in a normal function listener

// HTML: <ul id='list'><li>Item 1</li><li>Item 2</li></ul>

const list = document.getElementById('list');

list.addEventListener('click', function(event) {
    console.log('target:', event.target);               // the <li> that was clicked
    console.log('currentTarget:', event.currentTarget);  // always the <ul> (where listener is attached)
    console.log('this:', this);                           // also the <ul>, same as currentTarget
});

// With arrow functions, 'this' does NOT refer to currentTarget
// (arrow functions inherit 'this' from their enclosing lexical scope)
list.addEventListener('click', (event) => {
    console.log('this in arrow function:', this); // NOT the list element
    console.log('use event.currentTarget instead:', event.currentTarget);
});

// Practical delegation example using target vs currentTarget
list.addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
        event.target.classList.toggle('selected'); // only the clicked li
    }
    console.log('Always the ul:', event.currentTarget);
});

ये तीनों अक्सर confuse हो जाते हैं पर event handling के दौरान अलग-अलग चीज़ों को refer करते हैं, खासकर event delegation में important हैं।

Property	क्या refer करता है
event.target	वो actual element जिसने event trigger किया
event.currentTarget	वो element जिस पर listener attach है
this (regular function में)	currentTarget जैसा ही

const list = document.getElementById('list');

list.addEventListener('click', function(event) {
    console.log('target:', event.target);              // click हुआ <li>
    console.log('currentTarget:', event.currentTarget); // हमेशा <ul>
    console.log('this:', this);                          // भी <ul>
});

// Arrow function में 'this' currentTarget refer नहीं करता
list.addEventListener('click', (event) => {
    console.log('this:', this); // list element नहीं
    console.log('event.currentTarget:', event.currentTarget); // सही तरीका
});

// Delegation में target vs currentTarget
list.addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
        event.target.classList.toggle('selected');
    }
});

Was this answer clear?

Subjects

Related questions