http://wm-monitoring.ru/ ')) {alert('Спасибо за то что установили нашу кнопку! =)');} else {alert('Очень жаль! =(');}"> http://wm-monitoring.ru/

Главная › Новости

События HTML5

Опубликовано: 01.09.2018

Что такое события HTML?

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

Для чего нужны HTML события?

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

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

Событие мыши

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

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

Пример:

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

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

<html> <head> <script type="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>

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

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Последние новости категории:

Похожие статьи

Популярные статьи:

Добавить комментарий

Метки: html , javascript , Вебмастеру , для сайта
Карта
rss