IKURSKZ

Все курсы

Образовательная платформа

Урок 5. Слайд 2.

Обработчики событий onMouseMove и onMouseOut
1. Создайте файл lesson5-2.html.
2. Создайте в нем div шириной 100% и высотой 50vh.
3. Создайте функцию для обработки onMouseMove - обработчик события движения мыши.
4. Создайте функцию для обработки onMouseOut - обработчик события выхода мыши за пределы объекта.
5. Проверьте работоспособность кода.

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 100%;
  height: 50vh;
  border: 1px solid black;
}
</style>
</head>
<body>

<div onMouseMove="showCoords(event)" onMouseOut="clearCoor()"></div>

<p>Перемещайте курсор мыши внутри прямоугольника для просмотра его координат.</p>

<p id="demo"></p>

<script>
function showCoords(event) {
  var x = event.clientX;
  var y = event.clientY;
  var coor = "X координата: " + x + ", Y координата: " + y;
  document.getElementById("demo").innerHTML = coor;
}

function clearCoor() {
  document.getElementById("demo").innerHTML = "";
}
</script>

</body>
</html>

JavaScript

События в JavaScript onMouseMove и onMouseOut .

5 урок

JavaScript
Урок 5
Предыдущий слайд
Следующий слайд