События HTML5

2017-09-14 / Вр:14:50 / просмотров: 5321

События HTML5

Что такое события HTML?
События HTML – это специальные атрибуты для HTML тегов, которые были предназначены для вызова JavaScript скриптов. События срабатывают, когда на HTML-странице происходит какое-либо действие, например, клик по кнопке или наведение на ссылку курсора мышки.

Для чего нужны HTML события?
HTML события придадут сайту более профессиональный вид, а именно: с помощью специальных HTML атрибутов вы можете при клике на кнопку поменять фон сайта, вызвать всплывающее окно с формой, выводить сообщение, если пользователь выделил на сайте текст.

Список атрибутов событий HTML (с примерами)

Событие мыши

Событие вызывается определенным действием мышки.

onclick - скрипт будет выполнен по клику на элемент левой кнопкой мыши.
Пример:

<p onclick="this.innerHTML='Рад видеть вас на блоге BlogGood.ru!'">Кликните по этому тексту</p>

Можно записать и вот таким способом:

<html>
<head>
<script ENGINE="text/javascript">
function BlogGoodtext(id)
{
id.innerHTML="Рад видеть вас на блоге BlogGood.ru!";
}
</script>
</head>
<body>

<h1 onclick="BlogGoodtext(this)">Кликните по этому тексту</h1>

</body>
</html>

ondblclick - скрипт запустится после двойного клика мыши
Пример:

<p ondblclick="this.innerHTML='Рад видеть вас на блоге BlogGood.ru!'">Кликните по этому тексту</p>

Можно записать и вот таким способом:

<html>
<head>
<script type="text/javascript">
function BlogGoodtext(id)
{
id.innerHTML="Рад видеть вас на блоге BlogGood.ru!";
}
</script>
</head>
<body>

<h1 ondblclick="BlogGoodtext(this)">Кликните по этому тексту</h1>

</body>
</html>

ondrag - скрипт запустится при перетаскивании элемента.

Пример:

<div ondrag="this.innerHTML='Рад видеть вас на блоге BlogGood.ru!'"><img src=" bloggood-ru.png"></div>

Можно записать и вот таким способом:

<html>
<head>
<script type="text/javascript">
function BlogGoodtext(id)
{
id.innerHTML="Рад видеть вас на блоге BlogGood.ru!";
}
</script>
</head>
<body>
<div ondrag="BlogGoodtext(this)"><img src="bloggood-ru.png"></div>
</body>
</html>

ondragend - cкрипт запустится после операции перетаскивания.

Пример:

<div ondragend="this.innerHTML='Рад видеть вас на блоге BlogGood.ru!'"><img src="bloggood-ru.png"></div>

onmousedown - cкрипт запустится при нажатии кнопки мыши.

Пример:

<input type="button" value="кнопка" onmousedown="document.getElementById('bloggood').style.display='block';"><br/>
<div style="display: none;" id="bloggood"><img src="bloggood-ru.png"></div>

Результат:
При клике по кнопке появится картинка.

onmousemove - скрипт запустится, когда указатель мыши начнет перемещаться.

Пример:

<html>
<head>
<script>
function mouseCoords(e) {
x = e.pageX; // Координата X курсора
y = e.pageY; // Координата Y курсора
document.getElementById("coords").innerHTML = "X : " + x + ", Y : " + y;
}
</script>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
}
#coords {
color: #171616;
padding: 5px;
float: right;
}
</style>
</head>
<body onmousemove="mouseCoords(event)">
<div id="coords"></div>
</body>
</html>

Результат:

Если двигать мышкой, мы получаем ее координаты.

onmouseout - скрипт запустится, когда указатель мыши будет перемещаться из элемента.

Пример:

<style>
#div {
width: 200px; /* ширина блока */
height: 200px; /* высота */
border: 2px #000000 solid; /* рамка */
}
</style>
<script type="text/javascript">
function foncolor(color) {
document.getElementById('div').style.background = color;
}
</script>

<div id="div" onmouseout="foncolor('#000')"></div>

onmouseover - скрипт запустится, когда указатель мыши будет перемещаться над элементом.

Пример:
Для примера я буду использовать события onmouseout и onmouseover для более красивого эффекта

<style>
#div {
width: 200px; /* ширина блока */
height: 200px; /* высота */
border: 2px #000000 solid; /* рамка */
}
</style>
<script type="text/javascript">
function foncolor(color) {
document.getElementById('div').style.background = color;
}
</script>

<div id="div" onmouseout="foncolor('#000')" onmouseover="foncolor('#cc0000')" ></div>

onmouseup - скрипт запустится при отпускании кнопки мыши.

Пример:

<style>
#div {
width: 200px; /* ширина блока */
height: 200px; /* высота */
border: 2px #000000 solid; /* рамка */
}
</style>
<script type="text/javascript">
function foncolor(color) {
document.getElementById('div').style.background = color;
}
</script>

<div id="div" onmouseup="foncolor('green')"></div>

onmousewheel - скрипт запустится при использовании колеса мыши.

Пример:

<div onmousewheel="document.getElementById('bloggood').style.display='none';"><br/>
<div style="display: block;" id="bloggood"><img src="bloggood-ru.png"></div>

Результат:
При прокрутке колесика мышки картинка исчезнет.

События клавиатуры

События, вызываемые клавиатурой.

onkeydown - скрипт запустится, когда будет нажата клавиша.
onkeyup - скрипт запустится при отпускании клавиши.

Пример для onkeydown, onkeyup:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script>
function keydownFunction() {
document.getElementById("demo").style.backgroundColor = "#999";
}

function keyupFunction() {
document.getElementById("demo").style.backgroundColor = "#000";
}
</script>
</head>
<body id="demo" onkeydown="keydownFunction()" onkeyup="keyupFunction()">
Нажмите любую клавишу на клавиатуре
</body>
</html>

onkeypress - скрипт запустится после того, как клавиша была нажата и отпущена.

События формы

События срабатывают на действия HTML формы.

onsubmit - скрипт запустится при отправке формы.

Пример:

<form action="#" onsubmit="document.write('Данные отправлены')">
Ваше имя:
<input type="text" size="30">
<input type="submit" value="OK">
</form>

oninvalid - скрипт запустится, когда элемент станет недействителен.

Пример:

<form action="#">
Ваше имя:
<input type="text" size="30" oninvalid="document.write('Вы не заполнили обязательное поле!')" required>
<input type="submit" value="OK">
</form>

Попробуйте отправить пустое поле.

oninput - скрипт запускается, когда элемент получает ввод данных от пользователя.
Пример:

<p>Напишите любой текст:</p>
<textarea cols="40" rows="10" name = "testInput" id = "testInput" oninput = "testFunction()"></textarea>
<p id = "info" ></p>
<script>
function testFunction() {
var x = document.getElementById("testInput").value;
document.getElementById("info").innerHTML = "Пользователь набирает следующий текст: " + x;
}
</script>

Думаю, на этом можно закончить мою статью.