Как работает onclick в JavaScript

Что проверяют

Понимаете ли вы разницу между способами повесить обработчик и как событие проходит по DOM. Следом обычно спрашивают про addEventListener, всплытие и делегирование.

Как отвечать

onclick существует в двух видах, и их стоит различать:

• HTML-атрибут: <button onclick="save()">. Браузер превращает строку в функцию, внутри доступны this (сам элемент) и переменная event. Код видит глобальные переменные, но не функции из ES-модуля, а строгая Content Security Policy без unsafe-inline такой обработчик заблокирует;
• DOM-свойство: button.onclick = handler. Проще, но свойство у элемента одно, и второе присваивание затирает первый обработчик. Снять можно через button.onclick = null.

Современный способ это addEventListener("click", handler, options). Он позволяет повесить несколько обработчиков, выбрать фазу через capture, выполнить обработчик один раз через once, пометить его passive и снять всё сразу через signal от AbortController. removeEventListener требует ту же ссылку на функцию, поэтому анонимную стрелку так не снять.

Дальше расскажите про путь события: погружение от window к цели, сама цель, затем всплытие обратно. На этом держится делегирование: один обработчик на списке и проверка event.target.closest("li") вместо сотни обработчиков на строках. event.stopPropagation() останавливает путь, event.preventDefault() отменяет действие браузера, например переход по ссылке.

Полезная деталь: click у <button> срабатывает и с клавиатуры, по Enter и пробелу. У div с обработчиком этого нет, поэтому кликабельный div без роли и tabindex это проблема доступности.

Где спотыкаются

Пишут button.onclick = handler() со скобками. Функция вызывается сразу, а в свойство записывается её результат, обычно undefined.

Путают event.target и event.currentTarget. Первый это элемент, по которому кликнули, например иконка внутри кнопки, второй это элемент, на котором висит обработчик.

Говорят, что обработчики обязательно снимать, иначе утечка. Обработчик удалённого элемента сборщик мусора уберёт вместе с ним. Утекают подписки на window и document и замыкания, которые держат крупные объекты.