DOM-элементы. События. Часть 2
В предыдущей статье мы разобрались как можно обрабатывать событие клика используя методы элемента 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, то придется погуглить. Здесь мы изучаем JS =)
Содержимое файла script.js:
let btnRed = document.getElementById('btnRed');
console.dir(btnRed);
btnRed.onclick = function() {
alert('На меня нажали левой кнопкой мыши');
};
btnRed.oncontextmenu = function() {
alert('На меня нажали правой кнопкой мыши');
};Когда ты создашь все файлы с указанным содержимым открой с помощью своего браузера файл index.html. Должно получится следующее:
Как ты понимаешь, нас больше всего интересует файл с JS-кодом. Давай его разберем.
Первым делом, как обычно, ты должен выбрать элемент с которым хочешь взаимодействовать с помощью JS, в данном случае это кнопка с id="btnRed":
let btnRed = document.getElementById('btnRed');Дальше идет строка:
console.dir(btnRed);
Ты привык видеть console.log(), который выводит текстовое сообщение в консоль, а console.dir(), в свою очередь, выводит список свойств указанного JS-объекта(наша кнопка является DOM-объектом).
Итак, чтобы посмотреть, что же выводит в консоль данная команда нам нужно открыть инструменты разработчика. А для этого делаем следующее:
Либо так:
Либо, горячими клавишами. Но они отличаются от браузера к браузера от операционной системы к операционной системе.
Как ты заметил у меня все англоязычное и поэтому интуитивно ищи данные менюшки в своем браузере, если он у тебя на русском или любом другом языке. Если не получается найти, то гугли)
После открытия данной панели нам нужно выбрать консоль:
Если ты все сделал правильно, то у тебя там уже будет выведена надпись, но она не простая, а иерархичная. Это означает, что мы можем ее раскрыть нажав на стрелочку слева от нее:
И тут открывается огромный список всеразличных свойств и методов. Но мы ищем только те методы, которые начинаются со слова on. Дело в том, что методы, которые начинаются с on, и являются событиями, которые можно обрабатывать у данного элемента. Список примерно следующий:
Как видишь, их огромное множество и разбирать их все со мной – это гиблое дело. Общий прогресс не будет идти. Поэтому, посмотри сам, что они делают, как и зачем. Полный список событий с описанием находится тут.
Для примера я обработал 1 событие(нажатия правой кнопкой по элементу) разными способами:
btnRed.oncontextmenu = function() {
alert('На меня нажали правой кнопкой мыши');
};
//либо так
btnRed.addEventListener('contextmenu', function() {
alert('На меня нажали правой кнопкой мыши');
});Как видишь, в первом случае вызывается метод oncontextmenu, а во втором в методу addEventListener передается название события, но без начальной приставки on – contextmenu. Это правило касается всех событий.
Остальные события пробуй изучать сам. Потому что все обработчики для них пишутся аналогично.
Домашка
Почитай о других, и попробуй сделать для них обработчик в соответствии с примером выше.