Събития в JavaScript: addEventListener и делегиране

Проблем

Новият продукт не се добавя

Каталогът показва два продукта. „Покажи още“ добавя трети. „Добави“ на първите два увеличава кошницата, но „Добави“ на новия продукт не прави нищо. В конзолата няма грешка.

HTML, CSS, JS

<!doctype html>
<html lang="bg">
  <head>
    <meta charset="utf-8">
    <title>Каталог</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
  </head>
  <body>
    <p id="count">Кошница: 0</p>
    <ul id="products">
      <li data-id="1">
        <h2>Хляб „Добруджа“</h2>
        <button type="button">Добави</button>
      </li>
      <li data-id="2">
        <h2>Прясно мляко 3%</h2>
        <button type="button">Добави</button>
      </li>
    </ul>
    <button type="button" id="more">Покажи още</button>
  </body>
</html>

body { font-family: system-ui, sans-serif; padding: 16px; }
button { font-size: 16px; padding: 6px 14px; }
#products { list-style: none; padding: 0; }
#products li { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #ddd; }
#products h2 { font-size: 18px; flex: 1; }

const count = document.querySelector('#count');
let items = 0;

document.querySelectorAll('#products button').forEach((button) => {
  button.addEventListener('click', () => {
    items++;
    count.textContent = `Кошница: ${items}`;
    console.log('добавен продукт', button.closest('li').dataset.id);
  });
});

document.querySelector('#more').addEventListener('click', () => {
  const li = document.createElement('li');
  li.dataset.id = '3';
  const title = document.createElement('h2');
  title.textContent = 'Сирене';
  const button = document.createElement('button');
  button.type = 'button';
  button.textContent = 'Добави';
  li.append(title, button);
  document.querySelector('#products').append(li);
});

Кликни „Добави“ на хляба, после „Покажи още“, после „Добави“ на сиренето. Кошницата остава на 1. Бутонът на сиренето изглежда като другите и има същия текст. Какво му липсва?

Идеята

Събитие и слушател

Когато купувачът кликне, натисне клавиш или пише в поле, браузърът създава събитие: обект, който казва какво е станало и къде. Кодът го чака със слушател:

const button = document.querySelector('#plus');
button.addEventListener('click', (event) => {
  console.log(event.type, event.target);
});

Първият аргумент е видът на събитието: click, keydown, input, submit.
Вторият е функция. Браузърът я вика при всяко събитие и ѝ подава обекта на събитието. Стрелковите функции са от урока за ламбди в курса по JavaScript.
Подаваш функцията, а не я викаш: addEventListener('click', save), без скоби. save() би я извикал веднага.

Обектът на събитието има полета:

event.target е елементът, в който е станало събитието: бутонът, по който е кликнато.
event.currentTarget е елементът, чийто слушател върви сега.
event.key е клавишът при keydown: 'Enter', 'Escape', 'a'.

Сега вече е ясно какво липсва в проблема. Слушателите се слагат веднъж, при зареждането, на бутоните, които тогава ги има. Бутонът на сиренето е създаден по-късно и слушател няма.

Пробвай

Плюс и минус

Направи бутоните за броя: „+“ увеличава броя с 1, а „−“ го намалява с 1, но не под 1. Броят се показва в #qty.

HTML, CSS, JS

<!doctype html>
<html lang="bg">
  <head>
    <meta charset="utf-8">
    <title>Хляб „Добруджа“</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
  </head>
  <body>
    <h1>Хляб „Добруджа“</h1>
    <p>
      <button type="button" id="minus" aria-label="По-малко">−</button>
      <output id="qty">1</output>
      <button type="button" id="plus" aria-label="Повече">+</button>
    </p>
  </body>
</html>

body { font-family: system-ui, sans-serif; padding: 16px; }
button { font-size: 16px; padding: 6px 14px; }
output { display: inline-block; min-width: 2em; text-align: center; font-size: 20px; }

const qty = document.querySelector('#qty');
let count = 1;
// „+“ увеличава броя, „−“ го намалява, но не под 1.

Решение

index.html

<!doctype html>
<html lang="bg">
  <head>
    <meta charset="utf-8">
    <title>Хляб „Добруджа“</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
  </head>
  <body>
    <h1>Хляб „Добруджа“</h1>
    <p>
      <button type="button" id="minus" aria-label="По-малко">−</button>
      <output id="qty">1</output>
      <button type="button" id="plus" aria-label="Повече">+</button>
    </p>
  </body>
</html>

style.css

body { font-family: system-ui, sans-serif; padding: 16px; }
button { font-size: 16px; padding: 6px 14px; }
output { display: inline-block; min-width: 2em; text-align: center; font-size: 20px; }

script.js

const qty = document.querySelector('#qty');
let count = 1;

document.querySelector('#plus').addEventListener('click', () => {
  count++;
  qty.textContent = count;
});

document.querySelector('#minus').addEventListener('click', () => {
  if (count > 1) count--;
  qty.textContent = count;
});

Идеята

Събитието се издига

Бутонът е в <li>, <li> е в <ul>, а <ul> е в <main>. Клик по бутона е и клик по всеки от тях. Затова събитието не остава в бутона. То тръгва от event.target и се издига нагоре по родителите до document и window. Всеки родител със слушател за click го чува.

document.querySelector('ul').addEventListener('click', (event) => {
  console.log(event.target);        // бутонът, по който е кликнато
  console.log(event.currentTarget); // <ul>: елементът със слушателя
});

Повечето събития се издигат: click, keydown, input, submit. Някои не се издигат: focus и blur. За тях има focusin и focusout, които се издигат.

Виж го

Виж как се издига кликът

Вляво е дървото на каталога. Слушателят е на <ul>, а кликът е по бутона на млякото.

const list = document.querySelector('#products');
list.addEventListener('click', (event) => {
  const button = event.target.closest('button');
  if (!button) return;
  const item = button.closest('li');
  console.log('Добави', item.dataset.id);
});

Стъпка по стъпка, с думи

Слушателят е един и е на списъка <ul>, а не на бутоните. Той чака click.
Купувачът кликва „Добави“ на млякото. Събитието започва от най-вътрешния елемент под курсора: бутона. Това е event.target.
После се издига: от бутона към родителя му <li>, после към <ul>. Всеки родител също чува клика.
На <ul> има слушател и функцията тръгва. event.currentTarget е <ul>, елементът със слушателя. event.target си остава бутонът.
closest('button') започва от самия event.target и върви нагоре. Целта е бутон, затова е намерен веднага.
closest('li') тръгва от бутона нагоре и спира на първия <li>: млякото. data-id казва кой продукт е.
dataset.id е "2". Кошницата знае какво да добави.
Събитието продължава нагоре към <main>, <body>, document и window. Там няма слушатели и нищо друго не става.
Клик по името на хляба също стига до <ul>. Но целта е <h2>: closest('button') не намира бутон над него и връща null, а функцията спира.
Един слушател обслужва всички бутони в списъка, и тези, добавени по-късно: те също са в <ul>. Това се казва делегиране.

Кликът по името на хляба също стига до <ul>. Затова слушателят първо проверява дали е кликнат бутон.

Идеята

Делегиране

Вместо слушател на всеки бутон, слагаш един на общия родител. Той разбира от event.target кой бутон е кликнат. Това се казва делегиране.

list.addEventListener('click', (event) => {
  const button = event.target.closest('button');
  if (!button) return;
  const id = button.closest('li').dataset.id;
  // …добави продукт id
});

closest('button') започва от самия елемент и върви нагоре до първия, който пасва на селектора. Ако няма такъв, връща null. Тук пази от клик по името или празното място в <li>.
Данните за продукта са на <li> (data-id), а не на бутона. closest('li') стига до тях.

Ползите са две. Новите продукти работят без нищо допълнително: и те са в списъка. А слушателят е един, колкото и да са продуктите.

Пробвай

Поправи каталога

Поправи каталога с един слушател на #products. „Добави“ на всеки продукт, и на добавения с „Покажи още“, увеличава кошницата и пише в конзолата „добавен продукт“ и data-id на продукта. Клик по името на продукта не добавя нищо.

HTML, CSS, JS

<!doctype html>
<html lang="bg">
  <head>
    <meta charset="utf-8">
    <title>Каталог</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
  </head>
  <body>
    <p id="count">Кошница: 0</p>
    <ul id="products">
      <li data-id="1">
        <h2>Хляб „Добруджа“</h2>
        <button type="button">Добави</button>
      </li>
      <li data-id="2">
        <h2>Прясно мляко 3%</h2>
        <button type="button">Добави</button>
      </li>
    </ul>
    <button type="button" id="more">Покажи още</button>
  </body>
</html>

body { font-family: system-ui, sans-serif; padding: 16px; }
button { font-size: 16px; padding: 6px 14px; }
#products { list-style: none; padding: 0; }
#products li { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #ddd; }
#products h2 { font-size: 18px; flex: 1; }

const count = document.querySelector('#count');
let items = 0;

document.querySelectorAll('#products button').forEach((button) => {
  button.addEventListener('click', () => {
    items++;
    count.textContent = `Кошница: ${items}`;
    console.log('добавен продукт', button.closest('li').dataset.id);
  });
});

document.querySelector('#more').addEventListener('click', () => {
  const li = document.createElement('li');
  li.dataset.id = '3';
  const title = document.createElement('h2');
  title.textContent = 'Сирене';
  const button = document.createElement('button');
  button.type = 'button';
  button.textContent = 'Добави';
  li.append(title, button);
  document.querySelector('#products').append(li);
});

Решение

index.html

<!doctype html>
<html lang="bg">
  <head>
    <meta charset="utf-8">
    <title>Каталог</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
  </head>
  <body>
    <p id="count">Кошница: 0</p>
    <ul id="products">
      <li data-id="1">
        <h2>Хляб „Добруджа“</h2>
        <button type="button">Добави</button>
      </li>
      <li data-id="2">
        <h2>Прясно мляко 3%</h2>
        <button type="button">Добави</button>
      </li>
    </ul>
    <button type="button" id="more">Покажи още</button>
  </body>
</html>

style.css

body { font-family: system-ui, sans-serif; padding: 16px; }
button { font-size: 16px; padding: 6px 14px; }
#products { list-style: none; padding: 0; }
#products li { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #ddd; }
#products h2 { font-size: 18px; flex: 1; }

script.js

const count = document.querySelector('#count');
let items = 0;

document.querySelector('#products').addEventListener('click', (event) => {
  const button = event.target.closest('button');
  if (!button) return;
  items++;
  count.textContent = `Кошница: ${items}`;
  console.log('добавен продукт', button.closest('li').dataset.id);
});

document.querySelector('#more').addEventListener('click', () => {
  const li = document.createElement('li');
  li.dataset.id = '3';
  const title = document.createElement('h2');
  title.textContent = 'Сирене';
  const button = document.createElement('button');
  button.type = 'button';
  button.textContent = 'Добави';
  li.append(title, button);
  document.querySelector('#products').append(li);
});

Идеята

Действието по подразбиране

Някои събития имат действие, което браузърът прави сам, след слушателите. Клик по връзка отваря адреса ѝ. submit на формуляр изпраща полетата и зарежда новата страница. Това е действието по подразбиране.

Формулярът за търсене тук показва резултата в страницата. Пробвай.

HTML, CSS, JS

<!doctype html>
<html lang="bg">
  <head>
    <meta charset="utf-8">
    <title>Търси</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
  </head>
  <body>
    <form id="search">
      <label>Търси <input id="q" name="q"></label>
      <button>Намери</button>
    </form>
    <p id="result"></p>
  </body>
</html>

body { font-family: system-ui, sans-serif; padding: 16px; }
button { font-size: 16px; padding: 6px 14px; }

const form = document.querySelector('#search');
form.addEventListener('submit', (event) => {
  const q = document.querySelector('#q').value;
  document.querySelector('#result').textContent = `Търсиш: ${q}`;
});

Слушателят пише „Търсиш: мляко“, но после браузърът изпраща формуляра. В истинския браузър страницата се зарежда наново с ?q=мляко в адреса и резултатът изчезва. Пясъчникът е една страница: той спира изпращането и пише в конзолата „Формулярът е изпратен“.

Добави event.preventDefault(); в началото на функцията и пусни пак. Редът в конзолата изчезва: действието е спряно, а слушателят си върши работата. Същото важи за връзка, която отваря нещо в страницата, вместо да води към друг адрес.

event.stopPropagation() спира издигането. Рядко е нужно и обикновено е лош знак. Спира и слушатели, за които кодът не знае: делегирането по-горе, затварянето на меню при клик извън него, броенето на кликовете. Ако слушател „чува твърде много“, провери event.target, както прави closest в делегирането.

Пробвай

Намери грешката

Слушателят показва резултата, но формулярът пак се изпраща.

Избери реда с грешката.

Идеята

input или change

Полетата имат две събития за промяна:

input идва при всяка промяна на стойността: всяка буква, изтриване, поставяне.
change идва, когато купувачът е приключил. При текстово поле това е, когато напусне полето. При отметка, радио бутон и падащо меню е веднага след избора.

За търсене, което филтрира докато пишеш, е input. За падащо меню „Подреди по цена“ е change.

По-точно, за любопитните

Трети аргумент. addEventListener('click', f, { once: true }) слуша само веднъж. removeEventListener('click', f) маха слушателя, но само ако му подадеш същата функция. Стрелкова функция, написана наново, е друга функция.

onclick. button.onclick = f също работи, но е едно поле: втори onclick изтрива първия. addEventListener позволява много слушатели. Атрибутът onclick="…" в HTML смесва кода със страницата, а и се спира от строга политика за сигурност (CSP).

Издигане и улавяне. Пътят на събитието има и обратна посока: първо от window надолу до целта (улавяне, capture), после нагоре (издигане). addEventListener('click', f, { capture: true }) слуша на пътя надолу. Почти винаги трябва издигането.

Клавиатурата. Бутонът <button> получава click и от Enter и интервал. Затова click на бутон работи и с клавиатура. keydown на <div> не я замества (виж урока за достъпност).

event.key срещу event.code. key е знакът ('a' или 'а' според подредбата), а code е мястото на клавиша ('KeyA'). За преки пътища като Escape и Enter е key.

Упражнение

Търсене на живо

Направи търсенето да филтрира списъка, докато купувачът пише: показват се само продуктите, които съдържат текста, без значение от главни и малки букви. Скритият продукт е с hidden. #found показва колко са показани („Намерени: 2“). Escape в полето го изчиства и показва всички. Enter не изпраща формуляра.

HTML, CSS, JS

<!doctype html>
<html lang="bg">
  <head>
    <meta charset="utf-8">
    <title>Каталог</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
  </head>
  <body>
    <form id="search">
      <label>Търси <input id="q" autocomplete="off"></label>
    </form>
    <p id="found">Намерени: 4</p>
    <ul id="products">
      <li>Хляб „Добруджа“</li>
      <li>Прясно мляко 3%</li>
      <li>Кисело мляко</li>
      <li>Сирене</li>
    </ul>
  </body>
</html>

body { font-family: system-ui, sans-serif; padding: 16px; }
button { font-size: 16px; padding: 6px 14px; }

const input = document.querySelector('#q');
const found = document.querySelector('#found');
const items = document.querySelectorAll('#products li');

Решение

index.html

<!doctype html>
<html lang="bg">
  <head>
    <meta charset="utf-8">
    <title>Каталог</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
  </head>
  <body>
    <form id="search">
      <label>Търси <input id="q" autocomplete="off"></label>
    </form>
    <p id="found">Намерени: 4</p>
    <ul id="products">
      <li>Хляб „Добруджа“</li>
      <li>Прясно мляко 3%</li>
      <li>Кисело мляко</li>
      <li>Сирене</li>
    </ul>
  </body>
</html>

style.css

body { font-family: system-ui, sans-serif; padding: 16px; }
button { font-size: 16px; padding: 6px 14px; }

script.js

const input = document.querySelector('#q');
const found = document.querySelector('#found');
const items = document.querySelectorAll('#products li');

function filter() {
  const q = input.value.trim().toLowerCase();
  let shown = 0;
  items.forEach((li) => {
    const match = li.textContent.toLowerCase().includes(q);
    li.hidden = !match;
    if (match) shown++;
  });
  found.textContent = `Намерени: ${shown}`;
}

input.addEventListener('input', filter);

input.addEventListener('keydown', (event) => {
  if (event.key === 'Escape') {
    input.value = '';
    filter();
  }
});


document.querySelector('#search').addEventListener('submit', (event) => {
  event.preventDefault();
});

Тест

Провери се

1. Слушателят е на <ul>, а купувачът кликва бутон в <li>. Какво са event.target и event.currentTarget?target е бутонът, currentTarget е <ul>И двете са бутонътtarget е <ul>, currentTarget е бутонът

target е елементът, по който е кликнато. currentTarget е елементът, чийто слушател върви сега: този, на който е addEventListener.

2. Какво не е наред в button.addEventListener('click', save())?Нищо, така се пишеsave() се вика веднага, а на слушателя отива резултатът ѝ. Трябва save, без скобиclick трябва да е onclick

addEventListener иска функция, която да извика по-късно. save() я вика сега, при зареждането, и подава undefined.

3. Защо делегирането работи и за продукти, добавени след зареждането?querySelectorAll намира и бъдещите бутониБраузърът копира слушателите на новите елементиСлушателят е на списъка, а кликът по нов бутон също се издига до списъка

Новият <li> е дете на <ul>. Кликът по бутона в него се издига до <ul> като всеки друг клик и там го чака същият слушател.

4. Формулярът за търсене има слушател за submit, който показва резултата. Защо е нужно event.preventDefault()?Без него полетата не се четатБез него браузърът изпраща формуляра и зарежда страницата наново, а резултатът изчезваБез него слушателят не тръгва

Слушателят тръгва и показва резултата, но после браузърът прави действието си по подразбиране: изпраща формуляра и зарежда нова страница. preventDefault() спира точно това действие.

5. Търсене, което филтрира списъка докато купувачът пише. Кое събитие?changeinputsubmit

input идва при всяка промяна на стойността. change при текстово поле идва чак когато купувачът го напусне.

Събития

Бисквитки