> For the complete documentation index, see [llms.txt](https://thedvlpr.gitbook.io/javascript-for-dummies/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://thedvlpr.gitbook.io/javascript-for-dummies/dom-elementy.-sobytiya.-chast-2.md).
# 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)