When clicking the child element, what's the difference between e.target and e.currentTarget?
parent.addEventListener('click', e => {
console.log('Parent:', e.target.id, e.currentTarget.id);
});
child.addEventListener('click', e => {
console.log('Child:', e.target.id, e.currentTarget.id);
});
e.target always refers to the element that triggered the event (the element that was actually clicked), while e.currentTarget refers to the element that the current event listener is attached to. In the example, when clicking the child, e.target will always be the child element, but e.currentTarget will be either the child or parent depending on which listener is executing. This distinction is fundamental for implementing event delegation and handling event propagation correctly.