Что такое события 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>
Думаю, на этом можно закончить мою статью.
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Похожие статьи
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 329815 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274369 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 220443 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186394 -
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 181501
2 Ответов на комментарий - События HTML5
Добавить комментарий
Метки: html, javascript, Вебмастеру, для сайта
Благодарю Степан за полезный, как обычно, Пост !!
Пожалуйста, Александр!