Разница между традиционными обработчиками onclick и современными слушателями событий заключается в способе установки обработчиков событий. 1

Традиционные обработчики onclick прикрепляются к элементам с помощью атрибута onclick. 1 Однако у этого подхода есть недостатки: код html смешивается с кодом JavaScript, обработчики можно задать только для уже созданных на веб-странице элементов, к элементу для одного события может быть прикреплён только один обработчик. 1

Современные слушатели событий устанавливаются с помощью метода addEventListener(). 13 Метод принимает два параметра: название события без префикса on и функцию обработчика этого события. 1 Преимуществом использования слушателей является то, что для одного события можно установить несколько функций. 1