Події й форми

Доки на сторінці нічого не відбувається, твій код мовчить. Запускають його події: клік, введення в поле, надсилання форми. Ти вішаєш обробник і описуєш, що робити.

Перший аргумент — ім'я події рядком ("click", "input", "submit"), другий — функція, яку викличуть. Обробників на одному елементі може бути скільки завгодно: вони не затирають одне одного, а виконуються по черзі.

Форми

За замовчуванням submit перезавантажує сторінку й губить увесь стан. preventDefault() це скасовує. Обробник вішай на саму форму, а не на кнопку: тоді спрацює і клік по кнопці, і Enter у полі.

Делегування

Обробник висить на батькові й ловить кліки по всіх нащадках, бо подія спливає вгору деревом. Це єдиний зручний спосіб обробити елементи, яких ще немає: додав новий li — він запрацює сам, вішати нічого не треба.

• event.target.closest("li") — найближчий відповідний предок, враховуючи сам елемент.
• if (!row) return — клік міг прийти повз, по порожньому місцю контейнера.
• Зняти обробник можна лише за тим самим посиланням на функцію, яке вішав. Стрілку, написану просто у виклику, зняти не вийде.
• Для submit майже завжди потрібен preventDefault. Для кліку по посиланню — теж, якщо обробляєш перехід сам.