DOM-элементы. События. Часть 2

JavaScript простым языком

В предыдущем уроке мы разобрались, как можно обрабатывать событие клика, используя методы элемента onclick и addEventListener.

В этом уроке я хотел бы подсказать тебе, как посмотреть все события, которые ты можешь отслеживать у элемента.

Для просмотра событий элемента сначала создадим себе тестовую площадку.

Создай на своем компуктере папку, например, с названием web. В этой папке создай 3 файла: index.html, script.js, style.css

Содержимое файла index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Page</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <button class="red-btn" id="btnRed">Большая красная \
    кнопка</button>

    <script src="script.js"></script>
  </body>
</html>

Содержимое файла style.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:

let btnRed = document.getElementById('btnRed');

console.dir(btnRed);

btnRed.onclick = function() {
    alert('На меня нажали левой кнопкой мыши');
};

btnRed.oncontextmenu = function() {
    alert('На меня нажали правой кнопкой мыши');
};

Когда ты создашь все файлы с указанным содержимым открой с помощью своего браузера файл index.html. Должно получится следующее:

Как ты понимаешь, нас больше всего интересует файл с JS-кодом. Давай его разберем.

Первым делом, как обычно, ты должен выбрать элемент с которым хочешь взаимодействовать с помощью JavaScript, в данном случае это кнопка с id="btnRed":

let btnRed = document.getElementById('btnRed');

Дальше идет строка:

console.dir(btnRed);

Ты привык видеть console.log(), который выводит текстовое сообщение в консоль, а console.dir(), в свою очередь, выводит список свойств указанного JS-объекта (наша кнопка является DOM-объектом).

Итак, чтобы посмотреть, что же выводит в консоль данная команда нам нужно открыть инструменты разработчика (Developer Tools). А для этого делаем следующее:

Либо так:

Либо, горячими клавишами. Но они отличаются от браузера к браузеру, от операционной системы к операционной системе.

Как ты заметил у меня все англоязычное и поэтому интуитивно ищи данные менюшки в своем браузере, если он у тебя на русском или любом другом языке. Если не получается найти, то гугли)

После открытия данной панели нам нужно выбрать консоль:

Если ты все сделал правильно, то у тебя там уже будет выведена надпись, но она не простая, а иерархическая. Это означает, что мы можем ее раскрыть нажав на стрелочку слева от нее:

И здесь открывается огромный список различных свойств и методов. Но мы ищем только те методы, которые начинаются со слова on. Дело в том, что методы, которые начинаются с on, и являются событиями, можно обрабатывать у данного элемента. Список примерно следующий:

Как видишь, их огромное множество и разбирать их все со мной – это гиблое дело. Общий прогресс не будет идти. Поэтому, посмотри сам, что они делают, как и зачем. Полный список событий с описанием находится здесь.

Для примера я обработал 1 событие (нажатие правой кнопкой по элементу) разными способами:

btnRed.oncontextmenu = function() {
    alert('На меня нажали правой кнопкой мыши');
};

// либо так
btnRed.addEventListener('contextmenu', function() {
   alert('На меня нажали правой кнопкой мыши');
});

Как видишь, в первом случае вызывается метод oncontextmenu, а во втором в метод addEventListener передается название события, но без начальной приставки on – contextmenu. Это правило касается всех событий.

Остальные события пробуй изучать сам. Потому что все обработчики для них пишутся аналогично.