# Глобальные обработчики через useEffect в React

Предположим, что теперь мы хотим, чтобы цвет у нас менялся не только по клику на кнопку, но и по нажатию `Enter` на клавиатуре. В обычной React жизни прослушивать глобальный объект `window` использовав `addEventListener` нельзя. Для этого у нас есть эффекты. Давайте добавим это действие с помощью `useEffect`.

Напишем функцию обработчика по клику на `Enter`. Пусть цвет в этом случае меняется на красный:

`function handleEnter(event) { if (event.keyCode === 13) { setColor('red'); } }`

Привяжем теперь прослушивание событий к `window` в хуке `useEffect`:

`useEffect(() => { document.body.style.color = color; window.addEventListener('keydown', handleEnter); }, [color]);`

Если у нас есть какая-то установочная функция, то нам всегда нужно в `useEffect` возвращать код очистки или отписки, чтобы избежать проблем в дальнейшем. В данном случае нам нужно после прикрепления `addEventListener` вернуть его удаление:

`useEffect(() => { document.body.style.color = color; window.addEventListener('keydown', handleEnter); return () => { window.removeEventListener('keydown', handleEnter); }; }, [color]);`

Дан компонент. Сделайте так, чтобы по клику на любое место страницы фон этого компонента менял цвет.

Сделайте ссылку, по нажатию на которую будет появляться блок. Сделайте так, чтобы по нажатию в любое место окна браузера наш блок скрывался.

← →
↑