JavaScript events
In this lesson we’ll consider different events in javascript. Event is interaction user and page (click, scroll and so on). Especially you need to notice on click event
Code lesson
<!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