Using the event.currentTarget
property which belongs to the Event
interface can help you in many ways to identify target of the current event especially if you want to fetch attributes or modify the classname of an element that belongs to a group of elements sharing the same classname.
There are many examples but I chose to write a small snippet of highlighting a tab:
function highlightTab(e){
// Find elements that has the classname 'active'
// and remove them
if(document.querySelector('div.tab_item.active') !== null){
document.querySelector('div.tab_item.active').classList.remove('active');
}
// Add active class to target node
e.currentTarget.className += " active";
// Add active class to target's child node
// e.currentTarget.querySelector('a.child_anchor_link').className += " active";
// Add active class to target's parent node
// e.currentTarget.parentNode.className += " active";
}
Read Mozilla's official documentation to know more about getting the current target of an event and it's compatibility with different web browsers.