Чем отличается addEventListener от onclick?

onclick - это свойство конкретного DOM элемента. Значением этого свойства является обработчик события click, а именно - конкретная функция.

addEventListener - это метод, который добавляет обработчик события. Может быть вызван несколько раз, в этом случае будет добавлено несколько обработчиков. Позволяет указывать фазу события, на которую добавляется обработчик, а так же имеет дополнительные настройки.

Немного на примере:

btn1.onclick = function() { 
  console.log('first onclick'); 
} 
btn1.onclick = function() { 
  console.log('second onclick'); 
} 
 
btn2.addEventListener('click', function() { 
  console.log('first addEventListener'); 
}) 
btn2.addEventListener('click', function() { 
  console.log('second addEventListener'); 
})

<button id="btn1">onclick</button> 
<button id="btn2">addEventListener</button>