События в javascript
В этом уроке мы рассмотрим различный события в javascript. События — это взаимодействие пользователя с контентом страницы (клики мыши, движение мыши, нажатие на клавиатуру и др.). Особенно обратите внимание на событие onclick (клик мыши).
Код урока
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js события</title>
</head>
<body>
<button id="getDate">Показать дату</button>
<p id="date"></p>
<img src="https://placekitten.com/g/150/150" alt="" id="kitten">
<p>Позиция по горизонтали: <span id="xPos"></span></p>
<p>Позиция по вертикали: <span id="yPos"></span></p>
<input type="text" id="keyCode">
<script>
var btn = document.getElementById("getDate");
var p = document.getElementById("date");
var img = document.getElementById("kitten");
var x = document.getElementById("xPos");
var y = document.getElementById("yPos");
var code = document.getElementById("keyCode");
var body = document.body;
btn.onclick = function() {
p.innerHTML = Date();
}
img.oncontextmenu = function() {
alert("Котик");
}
img.onmouseover = function() {
this.style.borderRadius = "20px";
}
img.onmouseout = function() {
this.style.display = "none";
}
body.onmousemove = function() {
//x.innerHTML = event.clientX;
//y.innerHTML = event.clientY;
//x.innerHTML = event.pageX;
//y.innerHTML = event.pageY;
}
code.onkeydown = function() {
p.innerHTML = event.keyCode;
}
</script>
</body>
</html>
0 Comments