What's the difference between event handlers & listener?

This site, (which funnily enough has a cyclical reference to here by one of the comments) states otherwise, to what people have answered here (stating they are same); pasting one of the answers:

One difference is that if you add two event handlers for the same button click, the second event handler will overwrite the first and only that event will trigger. For example:

document.querySelector('.btn').onclick = function() {
  console.log('Hello ');
};

document.querySelector('.btn').onclick = function() {
  console.log('World!');
};

// This logs "World!" out to the console.

But if you use addEventListener instead, then both of the triggers will run.

document.querySelector('.btn').addEventListener('click', function() {
  console.log('Hello ');
});

document.querySelector('.btn').addEventListener('click', function() {
  console.log('World!');
});

// This logs "Hello" and "World!" out to the console.

I find this explanation particularly hands-on:

Event handlers are comprised of an event listener and a callback function. An event listener specifies the type of event that will be detected. The callback function executes when the event happens. Everything together is the event handler.

both of them used for associating a function when an event occurs, if using the event listener's you can listen more than once in A specified event (duplicate) for example listen to tow 'click' event into independent event listener's, but when using the handler it's impossible because handler is a property of your dom object and if Assign more than once a function in same event handler, for example, when set to the a element tow handler for onClick event, the last event handler assignment is work.

myElement= document.querySelector('#btn');

myElement.onClick = function(){
alert('first event handler');
}

myElement.onClick = function(){
alert('second event handler');
}

// result : occur last handler >> alert('second event handler'); 


but if using the event listeners you can listen to how many times listen to the same 
event.

myElement.addEventListener('click',()=>{

alert('first listener')

})

myElement.addEventListener('click',()=>{

alert('second listener')

})


/* result : occur both listeners - alert('firstlistener') >> and next >> alert('second 
listener'); */

there's no big difference. we can say they are almost the same things except for three subtle things that are:

1. you can use an event handler once. if you use a handler to an element twice or more, then the last handler will overwrite all those previous handlers. on the other hand, if you use event listeners more then once, there won't be such a thing like this. you can use many event listeners, but not just one.
2. For some events, handlers only work with addEventListener. like the DOMContentLoaded event, which triggers when the document is loaded and DOM is built.
3. whit using event listeners, you can pass an object or class by using handleEvent on them instead of a function to the handler. except for these subtle things, I don't think it exists any difference.

For more information see

https://javascript.info/introduction-browser-events#object-handlers-handleevent