Problem Statement
What is event.target vs event.currentTarget?
Explanation
Event.target is the actual element that triggered the event. It is the innermost element that was clicked or interacted with.
Event.currentTarget is the element that has the event listener attached. During bubbling, this is the current element processing the event.
Target can be a child element, but currentTarget is always the element with the listener. This distinction is important for event delegation.
Target can change during bubbling as different elements are processed. CurrentTarget always refers to the element with the listener.
Use target to find what was actually clicked. Use currentTarget to reference the element with the handler.
Understanding this difference is crucial for event delegation patterns.
Code Solution
SolutionRead Only
// HTML:
// <div id="parent">
// <button id="child">Click Me</button>
// </div>
const parent = document.getElementById('parent');
parent.addEventListener('click', function(event) {
console.log('target:', event.target.id);
console.log('currentTarget:', event.currentTarget.id);
});
// When clicking button:
// target: 'child' (button was clicked)
// currentTarget: 'parent' (listener is on parent)
// When clicking parent directly:
// target: 'parent'
// currentTarget: 'parent'
// (both same when clicking listener element)
// EVENT DELEGATION EXAMPLE
const list = document.getElementById('list');
// <ul id="list">
// <li>Item 1</li>
// <li>Item 2</li>
// </ul>
list.addEventListener('click', function(event) {
console.log('Clicked:', event.target.textContent);
console.log('Listener on:', event.currentTarget.id);
// Check if clicked element is LI
if (event.target.tagName === 'LI') {
event.target.style.backgroundColor = 'yellow';
}
});
// OTHER EVENT PROPERTIES
document.addEventListener('click', function(event) {
console.log('Type:', event.type); // 'click'
console.log('Target:', event.target);
console.log('CurrentTarget:', event.currentTarget); // document
console.log('Timestamp:', event.timeStamp);
console.log('Bubbles:', event.bubbles); // true for most events
console.log('Cancelable:', event.cancelable);
});
// MOUSE EVENT PROPERTIES
document.addEventListener('click', function(event) {
console.log('ClientX:', event.clientX); // X relative to viewport
console.log('ClientY:', event.clientY); // Y relative to viewport
console.log('PageX:', event.pageX); // X relative to document
console.log('PageY:', event.pageY); // Y relative to document
console.log('ScreenX:', event.screenX); // X relative to screen
console.log('ScreenY:', event.screenY); // Y relative to screen
console.log('Button:', event.button); // 0=left, 1=middle, 2=right
});
// KEYBOARD EVENT PROPERTIES
document.addEventListener('keydown', function(event) {
console.log('Key:', event.key); // 'a', 'Enter', etc.
console.log('Code:', event.code); // 'KeyA', 'Enter', etc.
console.log('KeyCode:', event.keyCode); // Deprecated
console.log('AltKey:', event.altKey); // true if Alt pressed
console.log('CtrlKey:', event.ctrlKey); // true if Ctrl pressed
console.log('ShiftKey:', event.shiftKey);
});
// PRACTICAL EXAMPLE - Click outside to close
const dropdown = document.getElementById('dropdown');
const button = document.getElementById('dropdownBtn');
button.addEventListener('click', (event) => {
event.stopPropagation();
dropdown.classList.toggle('open');
});
document.addEventListener('click', (event) => {
// If click is outside dropdown
if (!dropdown.contains(event.target)) {
dropdown.classList.remove('open');
}
});
// FORM EVENTS
const form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {
event.preventDefault(); // Stop form submission
console.log('Form submitted');
console.log('Target:', event.target); // The <form> element
// Get form data
const formData = new FormData(event.target);
console.log(formData.get('username'));
});