index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="1.js" defer></script>
</head>
<body>
<div id="one"></div>
</body>
</html>
style.css
#one {
width: 100px;
height: 100px;
background: orange;
}
1.js
var block = document.getElementById('one');
// По клику мышью перекрашиваем этот блок.
/*block.onclick = function() {
this.style.background = 'green';
this.onclick = null; // отмена события
}*/
// Двойной клик мышью.
/*block.ondblclick = function() {
this.style.background = 'red';
}*/
// Клик правой кнопкой мыши.
/*
block.oncontextmenu = function() {
this.style.background = 'black';
return false; // запрет для браузера выводить контекстное меню
}
*/
// Запрет для браузера выводить контекстное меню для всего сайта.
/*document.oncontextmenu = function() {
return false;
}*/
// Наведение мыши - мышь входит на элемент.
/*
block.onmouseenter = function() {
console.log('in');
this.style.background = 'gold';
}
// Мышь уходит с элемента.
block.onmouseleave = function() {
this.style.background = 'orange';
}
*/
// Движение мышью внутри блока.
/*var a = 0;
block.onmousemove = function() {
a++;
this.style.width = 100 + a+'px';
}*/
// Нажатие кнопки мыши: нажимаем и держим кнопку мыши любую.
// http://javascript.ru/node/1588
/*block.onmousedown = function(event) {
this.style.background = 'cyan';
console.log('button: ' + event.button);
console.log('which: ' + which.button);
}*/
// Нажимаем и отпускаем мышку внутри блока.
block.onmouseup = function() {
this.style.background = 'pink';
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="1.js" defer></script>
</head>
<body>
<div id="one"></div>
</body>
</html>
style.css
#one {
width: 100px;
height: 100px;
background: orange;
}
1.js
var block = document.getElementById('one');
// По клику мышью перекрашиваем этот блок.
/*block.onclick = function() {
this.style.background = 'green';
this.onclick = null; // отмена события
}*/
// Двойной клик мышью.
/*block.ondblclick = function() {
this.style.background = 'red';
}*/
// Клик правой кнопкой мыши.
/*
block.oncontextmenu = function() {
this.style.background = 'black';
return false; // запрет для браузера выводить контекстное меню
}
*/
// Запрет для браузера выводить контекстное меню для всего сайта.
/*document.oncontextmenu = function() {
return false;
}*/
// Наведение мыши - мышь входит на элемент.
/*
block.onmouseenter = function() {
console.log('in');
this.style.background = 'gold';
}
// Мышь уходит с элемента.
block.onmouseleave = function() {
this.style.background = 'orange';
}
*/
// Движение мышью внутри блока.
/*var a = 0;
block.onmousemove = function() {
a++;
this.style.width = 100 + a+'px';
}*/
// Нажатие кнопки мыши: нажимаем и держим кнопку мыши любую.
// http://javascript.ru/node/1588
/*block.onmousedown = function(event) {
this.style.background = 'cyan';
console.log('button: ' + event.button);
console.log('which: ' + which.button);
}*/
// Нажимаем и отпускаем мышку внутри блока.
block.onmouseup = function() {
this.style.background = 'pink';
}
Комментариев нет:
Отправить комментарий