Разница между addEventListener и on в JavaScript заключается в способе обработки событий. 13

on-свойства DOM-элементов позволяют добавить только одну функцию-обработчик на каждый элемент. 1 Если в такое свойство записать анонимную функцию, то она будет вызываться каждый раз, когда браузер будет создавать событие, связанное с этим элементом. 1

Метод addEventListener() предоставляет альтернативный метод подписки на события, позволяя использовать сколько угодно любых обработчиков. 3 Метод вызывается у DOM-элемента, ему нужно передать тип события и функцию, которую нужно выполнить. 1

Таким образом, основное различие в том, что с помощью on-свойств можно добавить только один обработчик на событие, а метод addEventListener() позволяет использовать несколько обработчиков. 24