# DOM-элементы. События. Часть 2
[](https://img.shields.io/badge/JavaScript-%D0%B4%D0%BB%D1%8F%20%D1%82%D1%83%D0%BF%D1%8B%D1%85-green.svg)
В предыдущем уроке мы разобрались, как можно **обрабатывать событие клика**, используя методы элемента `onclick` и `addEventListener`.
В этом уроке я хотел бы подсказать тебе, как посмотреть **все события**, которые ты можешь **отслеживать у элемента**.
Для просмотра событий элемента сначала создадим себе тестовую площадку.
Создай на своем компуктере папку, например, с названием `web`. В этой папке создай 3 файла: `index.html`, `script.js`, `style.css`
Содержимое файла `index.html`:
```markup
Page
```
Содержимое файла `style.css`:
```css
.red-btn {
background: red;
height: 100px;
width: 250px;
font-size: 16px;
color: white;
}
```
Это файл стилей. Все что мы делаем здесь: меняем цвет кнопки на красный, высоту кнопки (`height`) на 100 пикселей, ширину (`width`) на 250 пикселей, устанавливаем размер шрифта (`font-size`) в 16px, и цвет текста (`color`) в кнопке на белый. Если хочешь больше узнать о CSS, то придется гуглить. Здесь мы изучаем **JavaScript** =)
Содержимое файла `script.js`:
```javascript
let btnRed = document.getElementById('btnRed');
console.dir(btnRed);
btnRed.onclick = function() {
alert('На меня нажали левой кнопкой мыши');
};
btnRed.oncontextmenu = function() {
alert('На меня нажали правой кнопкой мыши');
};
```
Когда ты создашь все файлы с указанным содержимым открой с помощью своего браузера файл `index.html`. Должно получится следующее:
Как ты понимаешь, нас больше всего интересует файл с **JS-кодом**. Давай его разберем.
Первым делом, как обычно, ты должен выбрать элемент с которым хочешь взаимодействовать с помощью **JavaScript**, в данном случае это кнопка с `id="btnRed"`:
```javascript
let btnRed = document.getElementById('btnRed');
```
Дальше идет строка:
```javascript
console.dir(btnRed);
```
Ты привык видеть `console.log()`, который выводит текстовое сообщение в консоль, а `console.dir()`, в свою очередь, выводит список свойств указанного `JS-объекта` (наша кнопка является `DOM-объектом`).
Итак, чтобы посмотреть, что же выводит в консоль данная команда нам нужно открыть **инструменты разработчика (Developer Tools)**. А для этого делаем следующее:
Либо так:
Либо, горячими клавишами. Но они отличаются от браузера к браузеру, от операционной системы к операционной системе.
Как ты заметил у меня все англоязычное и поэтому интуитивно ищи данные менюшки в своем браузере, если он у тебя на русском или любом другом языке. Если не получается найти, то гугли)
После открытия данной панели нам нужно выбрать `консоль`:
Если ты все сделал правильно, то у тебя там уже будет выведена надпись, но она не простая, а иерархическая. Это означает, что мы можем ее раскрыть нажав на стрелочку слева от нее:
И здесь открывается огромный список различных свойств и методов. Но мы ищем только те методы, которые начинаются со слова `on`. Дело в том, что методы, которые начинаются с `on`, и являются событиями, можно обрабатывать у данного элемента. Список примерно следующий:
Как видишь, их огромное множество и разбирать их все со мной – это гиблое дело. Общий прогресс не будет идти. Поэтому, посмотри сам, что они делают, как и зачем. Полный список событий с описанием находится [здесь](https://developer.mozilla.org/ru/docs/Web/Events).
Для примера я обработал 1 событие (`нажатие правой кнопкой по элементу`) разными способами:
```javascript
btnRed.oncontextmenu = function() {
alert('На меня нажали правой кнопкой мыши');
};
// либо так
btnRed.addEventListener('contextmenu', function() {
alert('На меня нажали правой кнопкой мыши');
});
```
Как видишь, в первом случае вызывается метод `oncontextmenu`, а во втором в метод `addEventListener` передается название события, но без начальной приставки `on` – `contextmenu`. Это правило касается **всех событий**.
Остальные события пробуй изучать сам. Потому что все обработчики для них пишутся аналогично.
#### **Домашнее задание**
Почитай о других событиях и попробуй сделать для них обработчик в соответствии с примером выше.
[Читать о других событиях здесь](https://developer.mozilla.org/ru/docs/Web/Events)
---
# 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://thedvlpr.gitbook.io/javascript-for-dummies/dom-elementy.-sobytiya.-chast-2.md?ask=
```
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.