Can you target an element's parent element using event.target?

Deep dive into event.target and event.currentTarget

Oh, what's that? You're here for more than just a quick fix? Glad you asked! Strap in for some event delegation insights. Let's dive in.

document.querySelector('section').addEventListener('click', (event) => {
  // event.currentTarget gives you the 'section', the boss element.
  // event.target, the humble servant, is the specific element clicked within the 'section'.
  // Let's go up one level from event.target:
  let parentOfClicked = event.target.parentNode;
  // Parent in hand and you are ready to rule the kingdom. 
});


This is where the magic of event delegation happens. Hooking an event listener to a common parent, like a section, and using event.target to find your actor, the clicked element. Efficiency is key after all!

The valuable event.currentTarget

Distinct features

Not all heroes wear capes? event.target gets you the source of the turbulence but what when you need the savior, the element that agreed to lend an ear to the event?

myElement.addEventListener('click', (event) => {
  // this here is myElement, it's the same old friend event.currentTarget
  let eventListenerElement = event.currentTarget; 
  // Remember, big things often come in small packages! 
});


Delegating using event.currentTarget

In an event delegation scenario, event.currentTarget becomes your key if you need to find your way back to the parent:

document.querySelector('ul').addEventListener('click', (event) => {
  // This always refers to the 'ul' regardless of what li was clicked
  let delegateParent = event.currentTarget; 
  // Let's freshen up its look, shall we?
  delegateParent.style.backgroundColor = 'lightblue';
});


Voila! You've modified the parent!

Change isn't always scary. Spice up your event delegation with a tiny modification of innerHTML. Look at you go!

document.querySelector('ul').addEventListener('click', (event) => {
  let parentContent = event.currentTarget.parentNode; 
  parentContent.innerHTML = '<p>New content!</p>'; 
  // Mr. Parent now starts glowing with the new innerHTML!
});


The best approach to target parent elements

Minimizing use of jQuery

Lean JavaScript is the trend! It handles DOM manipulations like a boss without jQuery. Lighter, more streamlined code, fewer dependencies, what's not to love?

Safety first! Using parentNode with caution

Placing all your bets on parentNode can often lead to surprising disappointments due to lurking text nodes or sneakily hidden comments in DOM:

// Picture perfect element? Maybe not!
let riskyParent = event.target.parentNode; 


What to do then? Pair up parentNode with some extra caution, verify the node type:

let safeParent;
if (event.target.nodeType === Node.ELEMENT_NODE) {
  safeParent = event.target.parentNode; 
 // Just right! Cinderella can now go to the ball.
}


Beware of pitfalls!

Wrong parent? Not on my watch!

Keeping an extra pair of eyes open never hurts, verify if you have the right parent. A quick console.log can save the day!

console.log(parent); // Geared up with the magnifying glass!


Event listener, gear up!

Remember to share the blueprint with your addEventListener, define the event type or the callback function. You wouldn't want it to shoot in the dark!

// Oh no! Rookie mistake.
element.addEventListener(); 

// Wham bam! Perfect.
element.addEventListener('click', eventHandler);


Clean code alert! Abstract parent retrieval logic

Delight in the beauty of clean code with encapsulation. Squash the logic into a function:

// Abra-ka-dabra! Say hello to the magic function.
function getParent(event) {
  return event.target.parentNode; 
}

// Let's see the magic happen!

document.addEventListener('click', (event) => {
  let parent = getParent(event); 
  // Parent-Child reunions were never this easy, right?
});
