Обработка событий мыши: Тренажер JavaScript: Покоряем HTML DOM

Задание 1: Клик по кнопке

Добавьте обработчик события 'click' на кнопку. При клике на кнопку, текст в параграфе должен измениться на 'Клик!', используя метод `getElementById` для доступа к параграфу.

HTML

Восстановить HTML

                      <button id="myButton">Кнопка</button>
<p id="myParagraph">Нажми на кнопку</p>

<button id="myButton">Кнопка</button>
<p id="myParagraph">Нажми на кнопку</p>

JavaScript

const button = document.input__1("myButton");
const paragraph = document.input__2("myParagraph");

button.addEventListener('input__3', function() {
  paragraph.input__4 = "Клик!";
});

                     const button = document.input__1("myButton");
const paragraph = document.input__2("myParagraph");

button.addEventListener('input__3', function() {
  paragraph.input__4 = "Клик!";
});

Используйте метод `document.getElementById()` для получения доступа к элементу параграфа по его id. Затем, используйте свойство `textContent` для изменения текста параграфа. Для кнопки используйте метод `addEventListener()` для отслеживания события 'click'.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Задание 2: Двойной клик

Измените текст параграфа на 'Двойной клик!' при двойном клике на кнопку. Используйте событие 'dblclick'.

HTML

Восстановить HTML

                      <button id="doubleClickButton">Двойной клик</button>
<p id="doubleClickParagraph">Двойной кликни по кнопке</p>

<button id="doubleClickButton">Двойной клик</button>
<p id="doubleClickParagraph">Двойной кликни по кнопке</p>

JavaScript

const button = document.input__1("doubleClickButton");
const paragraph = document.input__2("doubleClickParagraph");

button.addEventListener('input__3', function() {
  paragraph.input__4 = "Двойной клик!";
});

                     const button = document.input__1("doubleClickButton");
const paragraph = document.input__2("doubleClickParagraph");

button.addEventListener('input__3', function() {
  paragraph.input__4 = "Двойной клик!";
});

Аналогично предыдущему заданию, используйте `document.getElementById()` для доступа к элементам. В этот раз вам понадобится событие 'dblclick' для двойного клика.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Задание 3: Наведение мыши

Измените цвет фона кнопки при наведении курсора мыши на нее. Используйте событие 'mouseover' и свойство `style.backgroundColor`.

HTML

Восстановить HTML

                      <button id="hoverButton" style="background-color: lightblue;">Наведи мышь</button>

<button id="hoverButton" style="background-color: lightblue;">Наведи мышь</button>

JavaScript

const button = document.input__1("hoverButton");

button.addEventListener('input__2', function() {
  button.style.input__3 = "yellow";
});

                     const button = document.input__1("hoverButton");

button.addEventListener('input__2', function() {
  button.style.input__3 = "yellow";
});

Используйте `document.getElementById()` для доступа к кнопке. Событие 'mouseover' возникает, когда курсор мыши наводится на элемент. Свойство `style.backgroundColor` позволяет изменить цвет фона элемента.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Задание 4: Уход мыши

Верните исходный цвет фона кнопки, когда курсор мыши уходит с кнопки. Используйте событие 'mouseout'.

HTML

Восстановить HTML

                      <button id="outButton">Убери мышь</button>

<button id="outButton">Убери мышь</button>

JavaScript

const button = document.input__1("outButton");

button.addEventListener('input__2', function() {
  button.style.input__3 = "lightblue";
});

                     const button = document.input__1("outButton");

button.addEventListener('input__2', function() {
  button.style.input__3 = "lightblue";
});

Используйте событие 'mouseout', которое возникает, когда курсор мыши покидает элемент. Вам нужно вернуть исходный цвет фона, который был задан в HTML.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Задание 5: Изменение текста при наведении и уходе

Измените текст кнопки на 'Навели!' при наведении мыши и на 'Убрали!' при уходе мыши. Используйте события 'mouseover' и 'mouseout'.

HTML

Восстановить HTML

                      <button id="textButton">Наведи/Убери</button>

<button id="textButton">Наведи/Убери</button>

JavaScript

const button = document.input__1("textButton");

button.addEventListener('input__2', function() {
  button.input__3 = "Навели!";
});

button.addEventListener('input__4', function() {
  button.input__5 = "Убрали!";
});

                     const button = document.input__1("textButton");

button.addEventListener('input__2', function() {
  button.input__3 = "Навели!";
});

button.addEventListener('input__4', function() {
  button.input__5 = "Убрали!";
});

Используйте два обработчика событий: 'mouseover' и 'mouseout' для одной и той же кнопки. В каждом обработчике меняйте `textContent` кнопки.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Задание 6: Координаты мыши

Выведите координаты X и Y курсора мыши в параграф при движении мыши в пределах блока `div`. Используйте событие 'mousemove' и свойства `event.clientX` и `event.clientY`.

CSS

#mouseArea {
  width: 200px;
  height: 100px;
  border: 1px solid black;
}

HTML

Восстановить HTML

                      <div id="mouseArea">Двигайте мышью здесь</div>
<p id="coordsParagraph">Координаты: </p>

<div id="mouseArea">Двигайте мышью здесь</div>
<p id="coordsParagraph">Координаты: </p>

JavaScript

const mouseArea = document.input__1("mouseArea");
const coordsParagraph = document.input__2("coordsParagraph");

mouseArea.addEventListener('input__3', function(event) {
  coordsParagraph.input__4 = `Координаты: X: ${event.input__5}, Y: ${event.input__6}`;
});

                     const mouseArea = document.input__1("mouseArea");
const coordsParagraph = document.input__2("coordsParagraph");

mouseArea.addEventListener('input__3', function(event) {
  coordsParagraph.input__4 = `Координаты: X: ${event.input__5}, Y: ${event.input__6}`;
});

Событие 'mousemove' возникает при каждом движении мыши. Функция-обработчик события принимает объект `event`, который содержит информацию о событии, включая координаты мыши `clientX` и `clientY`. Используйте `textContent` параграфа для вывода координат.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Задание 7: Изменение размера блока при движении мыши

Увеличивайте ширину блока `div` при движении мыши вправо и уменьшайте при движении влево. Начальная ширина блока 100px. Используйте 'mousemove', `event.clientX` и `style.width`.

CSS

#resizeArea {
  width: 100px;
  height: 50px;
  background-color: lightgreen;
}

HTML

Восстановить HTML

                      <div id="resizeArea">Изменяемый блок</div>

<div id="resizeArea">Изменяемый блок</div>

JavaScript

const resizeArea = document.input__1("resizeArea");
let initialX = null;

resizeArea.addEventListener('input__2', function(event) {
  if (initialX === null) {
    initialX = event.input__3;
  } else {
    const deltaX = event.input__4 - initialX;
    resizeArea.style.input__5 = `${100 + deltaX}px`;
  }
});

                     const resizeArea = document.input__1("resizeArea");
let initialX = null;

resizeArea.addEventListener('input__2', function(event) {
  if (initialX === null) {
    initialX = event.input__3;
  } else {
    const deltaX = event.input__4 - initialX;
    resizeArea.style.input__5 = `${100 + deltaX}px`;
  }
});

Сохраните начальную координату X при первом движении мыши. При каждом последующем движении сравнивайте текущую координату `clientX` с начальной. Если `clientX` больше начальной, увеличивайте ширину, иначе - уменьшайте. Используйте `style.width` для изменения ширины.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Задание 8: Клик и удержание кнопки

Измените текст кнопки на 'Удерживаю!' при нажатии кнопки мыши (mousedown) и на 'Отпустил!' при отпускании (mouseup).

HTML

Восстановить HTML

                      <button id="holdButton">Нажми и удерживай</button>

<button id="holdButton">Нажми и удерживай</button>

JavaScript

const button = document.input__1("holdButton");

button.addEventListener('input__2', function() {
  button.input__3 = "Удерживаю!";
});

button.addEventListener('input__4', function() {
  button.input__5 = "Отпустил!";
});

                     const button = document.input__1("holdButton");

button.addEventListener('input__2', function() {
  button.input__3 = "Удерживаю!";
});

button.addEventListener('input__4', function() {
  button.input__5 = "Отпустил!";
});

Используйте события 'mousedown' и 'mouseup' на кнопке. В обработчике 'mousedown' меняйте текст на 'Удерживаю!', в обработчике 'mouseup' - на 'Отпустил!'.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Задание 9: Перемещение элемента мышью

Перемещайте блок `div` по странице, перетаскивая его мышью. Используйте 'mousedown', 'mousemove', 'mouseup' и свойства `style.position`, `style.left`, `style.top`.

CSS

#draggableDiv {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: orange;
  cursor: grab;
}

HTML

Восстановить HTML

                      <div id="draggableDiv">Перетащи меня</div>

<div id="draggableDiv">Перетащи меня</div>

JavaScript

const draggableDiv = document.input__1("draggableDiv");
let offsetX, offsetY;
let isDragging = false;

draggableDiv.addEventListener('input__2', function(event) {
  isDragging = true;
  offsetX = event.clientX - draggableDiv.offsetLeft;
  offsetY = event.clientY - draggableDiv.offsetTop;
});

document.addEventListener('input__3', function(event) {
  if (isDragging) {
    draggableDiv.style.input__4 = `${event.clientX - offsetX}px`;
    draggableDiv.style.input__5 = `${event.clientY - offsetY}px`;
  }
});

document.addEventListener('input__6', function() {
  isDragging = false;
});

                     const draggableDiv = document.input__1("draggableDiv");
let offsetX, offsetY;
let isDragging = false;

draggableDiv.addEventListener('input__2', function(event) {
  isDragging = true;
  offsetX = event.clientX - draggableDiv.offsetLeft;
  offsetY = event.clientY - draggableDiv.offsetTop;
});

document.addEventListener('input__3', function(event) {
  if (isDragging) {
    draggableDiv.style.input__4 = `${event.clientX - offsetX}px`;
    draggableDiv.style.input__5 = `${event.clientY - offsetY}px`;
  }
});

document.addEventListener('input__6', function() {
  isDragging = false;
});

При 'mousedown' на блоке, запомните смещение курсора относительно блока. При 'mousemove' (если кнопка мыши зажата), изменяйте `style.left` и `style.top` блока, учитывая смещение. При 'mouseup' - прекратите перемещение.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Задание 10: Клик по изображению

При клике на изображение, измените его `src` на другое изображение из предложенных. Используйте массив URL-адресов изображений и меняйте `src` по кругу.

HTML

Восстановить HTML

                      <img id="clickableImage" src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" width="100">

<img id="clickableImage" src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" width="100">

JavaScript

const image = document.input__1("clickableImage");
const imageUrls = [
  "https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png",
  "https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike-300x300.png",
  "https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike3-300x300.png",
  "https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike4-300x300.png"
];
let currentImageIndex = 0;

image.addEventListener('input__2', function() {
  currentImageIndex = (currentImageIndex + 1) % imageUrls.length;
  image.input__3 = imageUrls[currentImageIndex];
});

                     const image = document.input__1("clickableImage");
const imageUrls = [
  "https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png",
  "https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike-300x300.png",
  "https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike3-300x300.png",
  "https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike4-300x300.png"
];
let currentImageIndex = 0;

image.addEventListener('input__2', function() {
  currentImageIndex = (currentImageIndex + 1) % imageUrls.length;
  image.input__3 = imageUrls[currentImageIndex];
});

Создайте массив с URL-адресами изображений. При клике на изображение, получите текущий индекс изображения в массиве. Увеличьте индекс на 1 (если индекс последний в массиве, вернитесь к 0). Установите новое `src` изображения, используя новый индекс.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Задание 11: Контекстное меню по правому клику

Отмените стандартное контекстное меню при правом клике мыши на блоке `div` и выведите сообщение 'Правый клик запрещен!' в параграф. Используйте событие 'contextmenu' и метод `event.preventDefault()`.

CSS

#contextMenuArea {
  width: 200px;
  height: 100px;
  border: 1px solid red;
}

HTML

Восстановить HTML

                      <div id="contextMenuArea">Правый клик здесь</div>
<p id="contextMenuParagraph"></p>

<div id="contextMenuArea">Правый клик здесь</div>
<p id="contextMenuParagraph"></p>

JavaScript

const contextMenuArea = document.input__1("contextMenuArea");
const contextMenuParagraph = document.input__2("contextMenuParagraph");

contextMenuArea.addEventListener('input__3', function(event) {
  event.input__4();
  contextMenuParagraph.input__5 = "Правый клик запрещен!";
});

                     const contextMenuArea = document.input__1("contextMenuArea");
const contextMenuParagraph = document.input__2("contextMenuParagraph");

contextMenuArea.addEventListener('input__3', function(event) {
  event.input__4();
  contextMenuParagraph.input__5 = "Правый клик запрещен!";
});

Событие 'contextmenu' возникает при попытке открыть контекстное меню (обычно правый клик). Метод `event.preventDefault()` отменяет действие браузера по умолчанию, в данном случае - открытие контекстного меню. Используйте `textContent` параграфа для вывода сообщения.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку