# Слушатели событий

Для того, чтобы элемент реагировал на действия пользователя, на него необходимо повесить слушателя (обработчик) события. То есть функцию, которая сработает, как только событие произошло. Именно благодаря слушателям событий, скрипт может реагировать на действия пользователя.

Методы `elem.addEventListener()` и `elem.removeEventListener()` - это современный способ назначить или удалить обработчик, при этом можно использовать сколько угодно обработчиков на одном типе события.

[Overview of Events and Handlers](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Overview_of_Events_and_Handlers)

## element.addEventListener() <a href="#metod-elemaddeventlistener" id="metod-elemaddeventlistener"></a>

Добавляет слушателя события на элемент.

```
element.addEventListener(event, handler[, phase])
```

* `event` - имя события, строка, например `click`
* `handler` - ссылка на функцию, которую надо поставить обработчиком
* `phase` - необязательный аргумент, фаза, на которой обработчик должен сработать. Указывается крайне редко.

#### 2.1.1. addEventListener и this <a href="#addeventlistener-i-this" id="addeventlistener-i-this"></a>

Если мы передаем функцию, которая использует `this`, по умолчанию `this` внутри нее будет ссылаться на сам DOM-узел на котором висит слушатель. Не забывайте привязывать контекст используя метод `bind`.

```
const user = {
  name: 'Mango',
  showName() {
    console.log(this);
    // this будет ссылаться на button если использовать showName как callback
    console.log(`My name is: ${this.name}`);
    // undefined так как поля name у button нет
  },
};

/*
 * Представим что у нас есть кнопка с классом js-btn
 * Выберем ее и повесим на нее слушатель клика
 */
const btn = document.querySelector('.js-btn');

user.showName(); //работает
btn.addEventListener('click', user.showName); // не работает
btn.addEventListener('click', user.showName.bind(user)); // работает
```

## element.removeEventListener() <a href="#metod-elemremoveeventlistener" id="metod-elemremoveeventlistener"></a>

Удаляет слушателя. Аргументы те же, что у `addEventListener`.

```
element.removeEventListener(event, handler[, phase])
```

Для удаления нужно передать ссылку именно на ту функцию-обработчик, которая была назначена в `addEventListener`. Поэтому для `callback` используют отдельную функцию и передают ее по имени.

[Ссылка на пример в Codepen.io](https://codepen.io/goit-fe-adv/pen/brXOOw/)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://aleksandra-hrevtsova.gitbook.io/senior-front-end-javascript/events/slushateli-sobytii.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.