1class="hl-comment">// Додавання слухача подій
2btn.addEventListener(class="hl-string">&#039;click&#039;, class="hl-keyword">function(event) {
3  console.log(class="hl-string">&#039;Клік!&#039;);
4  event.preventDefault();  class="hl-comment">// заборонити дію за замовчуванням
5  event.stopPropagation(); class="hl-comment">// зупинити спливання

});

💡 Приклад коду

// Стрілкова функція
btn.addEventListener('click', (e) => {
  console.log(e.target);  // елемент що спрацював
});

// Видалення слухача
function handler() { /* ... */ }
btn.addEventListener('click', handler);
btn.removeEventListener('click', handler);

// Популярні події:
// click, dblclick, mouseenter, mouseleave
// keydown, keyup, keypress
// input, change, submit, focus, blur
// DOMContentLoaded, load, resize, scroll

// Делегування подій (один слухач на батька)
document.querySelector('.list').addEventListener('click', (e) => {
  if (e.target.matches('.list-item')) {
    console.log('Натиснуто елемент:', e.target.textContent);
  }
});

// DOMContentLoaded — чекаємо завантаження DOM
document.addEventListener('DOMContentLoaded', () => {
  // безпечно працювати з DOM
});

Вивід:

← Попередній урок Наступний урок →