Let say I want to create custom event that gets triggered on change of certain entities like name,phone-number,address etc… What would be the right way to handle this?

1st Approach:
Create a single custom event and handle all the entity changes in 1 callback
// custom evnet
document.dispatchEvent(
new window.CustomEvent(ENTITY_UPDATE, {
detail: { type: name || phone || address }
})
)

//listener for the custom events

document.addEventListner(ENTITY_UPDATE, ({detail:{type}}) => {
switch(type) {

case name: //handle name change

case phone: //handle phone change

case address: //handle address change

}

})

2nd Approach:
Create separate custom events for each of the entities, and have separate callbacks for them.

// custom evnet for Team
document.dispatchEvent(
new window.CustomEvent(TEAM_UPDATE, {
detail: {data }
})
)
// event handler
document.addEventListner(TEAM_UPDATE, ({detail:data}) => {//handle team data})

// similary we create separate custom events for phone and address

I want to handle all the entity changes independently. What would be the right way to handle this?

I just wanted to get an openion on what would be the best apprach to follow here.