React Frontend Developer

Question 1

К какому типу задач относятся обработчики событий (event listeners)?

Accepted Answer

Обработчики событий относятся к реактивным и событийно-ориентированным задачам. Они не выполняются постоянно, а срабатывают в ответ на действия пользователя или системы. Такие задачи управляют потоком взаимодействия, а не вычислениями. Это ключевая часть пользовательских интерфейсов.

Question 2

Как подписываться на события в браузере и какие параметры можно передать?

Accepted Answer

Подписка на события выполняется через addEventListener. В него передается тип события, обработчик и объект параметров. Можно указать параметры capture, once, passive и другие, которые управляют поведением обработчика.

Question 3

Что происходит при добавлении и удалении eventListener?

Accepted Answer

При добавлении eventListener функция-обработчик регистрируется для указанного события на элементе. При возникновении события эта функция выполняется. Удаление eventListener отменяет эту регистрацию, и функция больше не будет вызываться. Важно удалять слушатели, когда они больше не нужны, особенно для элементов, которые удаляются из DOM, чтобы избежать утечек памяти.

Question 4

Как работает передача функций в addEventListener?

Accepted Answer

Метод addEventListener принимает два основных аргумента: тип события и функцию-обработчик. Функция передаётся по ссылке и будет вызвана при наступлении указанного события. Можно передавать как именованные функции, так и анонимные. Важно не вызывать функцию сразу, а передавать её объявление, иначе она выполнится мгновенно, а не по событию.

Question 5

Как реализовать кастомный хук для работы с eventListener?

Accepted Answer

Кастомный хук для работы с eventListener позволяет централизованно управлять подпиской на события DOM. Он использует useEffect для добавления и удаления слушателя, а useRef — для сохранения стабильной ссылки на callback-функцию. Это предотвращает утечки памяти и обеспечивает правильную очистку при размонтировании компонента. Хук принимает тип события, обработчик и опциональный элемент-цель.

Question 6

Почему removeEventListener может не удалить обработчик?

Accepted Answer

Метод removeEventListener может не удалить обработчик, если переданные ему параметры не совпадают в точности с теми, которые использовались при добавлении через addEventListener. Чаще всего это происходит, когда в качестве обработчика передаётся анонимная функция, так как каждый вызов создаёт новую функцию в памяти. Также важно совпадение фаз события (capturing или bubbling) и других опций, если они указаны.

Вопросы React Frontend Developer