Как добавить слушатель события в JavaScript?

addEventListener — современный и предпочтительный способ.

// Получаем элемент
const button = document.getElementById('myButton');

// Добавляем обработчик события 'click'
button.addEventListener('click', function() {
  // Код, который выполнится при клике
  console.log('Кнопка нажата!');
});

Он позволяет добавлять несколько обработчиков одного типа события к одному элементу, контролировать фазу (захват или всплытие) и легко удалять обработчики с помощью removeEventListener.

attachEvent — устаревший метод для Internet Explorer (до версии 11).

// Проверка существования attachEvent (для обратной совместимости)
if (element.attachEvent) {
  element.attachEvent('onclick', function() {
    // Делаем что-то
  });
}

Использование inline-обработчиков, присваивая функцию напрямую свойству элемента, например onclick.

<button onclick="myFunction()">Нажми меня</button>

<script>
function myFunction() {
  console.log('inline click');
}
</script>

Этот метод считается менее гибким, так как можно назначить только один обработчик данного типа события на элемент, и смешивает HTML и JavaScript.

Сводная таблица: