Both of these are commonly used to accomplish the same things so the question is when do I use one or the other?

For example in angular but i belive more web frameworks i can do this:

window.addEventListener('resize', (event: UIEvent) => {
    const window = event.target as Window;
    this.changeConfig(window.innerWidth);
})

Or this:

window.onresize = (event: any) => {
    this.changeConfig(event.target.innerWidth);
};

I have read through the documentation on MDN but don't understand what is the appropriate use case for each.

Window: resize event

GlobalEventHandlers.onresize

I ran into this issue when refactoring some angular code and read this question Property innerWidth does not exist on type EventTarget but was not able to find the difference between the two methods. I am trying to gain a deeper understanding and write some performant code so any advice or documentation is appreciated.