Событие onmouseout

Событие onmouseout срабатывает, когда курсор мыши выходит за пределы элемента, к которому добавляется параметр onmouseout. Это событие обычно сочетают в связке с параметром onmouseover.

Синтаксис

onmouseout=«скрипт»

Значения

См. скрипт.

Пример

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Событие onmouseout</title>
  <script type="text/javascript">
   function resize(img, x, y) {
    img.width = x;
    img.height = y;
   }
  </script>
 </head>
 <body>
  <p><img src="uploads/2015/04/Бог.jpg" alt="Иисус Христос" 
    onmouseout="resize(this, 100, 111)" onmouseover="resize(this, 200, 222)"></p> 
 </body>
</html>

В данном примере при наведении курсора на изображение оно увеличивается в размерах, а после отвода курсора за пределы картинки, меняет размеры на исходные.

 Результат





Событие onmouseout


Иисус Христос


Примечание

Internet Explorer до версии 7.0 содержит ошибку при работе с изображениями, события onmouseover и onmouseout для <img> не обрабатываются.

Поддержка браузеров

IE.IE ChromeChrome OperaOpera SafariSafari FirefoxFirefox
 +  +  +  +  +

Событие onmousedown

Событие onmousedown по своему действию похоже на onclick и отличается от него тем, что срабатывает в момент нажатия на кнопку мыши. onclick же в каком-то смысле является комбинацией событий onmousedown и onmouseup.

Синтаксис

onmousedown=«скрипт»

Значения

См. скрипт.

Пример

<head>
  <meta charset="utf-8">
  <title>Событие onmousedown</title>
  <script>
   var i = 0; 
   function counter(){
    i++;
    document.getElementById("layer2").innerHTML += i + " ";
   }
  </script>
  <style type="text/css">
   #layer1 {
    background: #fc0; /* Цвет фона */
    padding: 30px 10px; /* Поля вокруг текста */
   }
  </style>
 </head>
 <body onmouseup="if(window.interval) clearInterval(interval)">
   <div id="layer1" onmousedown="interval=setInterval('counter()',50)">
    Щёлкните внутри
   </div>
   <div id="layer2"></div>
 </body>
</html>

 Результат





Событие onmousedown


Щёлкните внутри


В данном примере, при наведении курсора на оранжевый слой и нажатии на кнопку мыши, выводятся числа (рис. 1) до тех пор, пока кнопка не будет отпущена.

1

Рис. 1. Использование события onmousedown

Событие onload

Событие onload используется как уведомление того, что веб-страница полностью загружена, включая всё содержание, изображения, стилевые файлы и внешние скрипты.

Синтаксис

onload=«скрипт»

См. скрипт.

Пример

<!DOCTYPE id="360oCgdydXc5NDgyGAKkIWli" data-yobjectid="0oCgdydXc5NDgyGAKkIWli" data-yobjectbegin="36" data-yobjectlength="4">HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Событие onload</title>
  <style>
   @keyframes _transparent {
    from { opacity: 0; }
    to { opacity: 1;}
   }
   @-webkit-keyframes _transparent {
    from { opacity: 0; }
    to { opacity: 1;}
   }
   #status {
    position: absolute;
    background: #fc0;
    bottom: 0; right: 0;
    padding: 10px; margin: 0;
    display: none;
    animation: _transparent 3s;
    -webkit-animation: _transparent 3s;
   }
  </style>
  <script>
   function loadPage() {
    document.getElementById('status').style.display = 'block';
   }
  </script>
 </head>
 <body onload="loadPage()">
  <p id="status">Страница загружена</p>
 </body>
</html>

 Результат

В данном примере после загрузки страницы будет выведено сообщение «Страница загружена».

Поддержка браузеров

IE.IE ChromeChrome OperaOpera SafariSafari FirefoxFirefox
 +  +  +  +  +

Событие onkeyup

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

Синтаксис

onkeyup=«скрипт»

Значения

См. скрипт.

Пример

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Событие onkeyup</title>
  <style>
   #msg { 
    color: red; /* Цвет текста */ 
    display: none; /* Прячем сообщение */
   }
  </style>
  <script>
   function validForm(f) {
    // Если введено число, то скрываем предупреждение
    if (isDigit(f.value)) document.getElementById("msg").style.display = "none";
    // В противном случае отображаем предупреждение
    else document.getElementById("msg").style.display = "inline";
   }
   // Функция по проверке, число введено или нет
   function isDigit(data) {
    var numStr="0123456789";
    var k = 0;
    for (i=0;i<data.length;i++) {
      thisChar = data.substring(i, i+1);
      if (numStr.indexOf(thisChar) != -1) k++;
    }
    if (k == data.length) return 1;
    else return 0;
   }
  </script>
 </head>
 <body>
  <form action="">
   <p>Введите любое число.</p>
   <p><input type="text" name="num" onkeyup="validForm(this)"> 
      <span id="msg">Вы ошиблись. Пожалуйста, введите число.</span></p>
  </form>
 </body>
</html>

В данном примере по мере набора символов в текстовом поле происходит проверка на ввод цифр. Если введена буква, пробел или другой символ отличный от цифры, то показывается предупреждение об ошибке (рис. 1).

1

Рис. 1. Использование события onkeyup для проверки данных формы

Поддержка браузеров

IE.IE ChromeChrome OperaOpera SafariSafari FirefoxFirefox
 +  +  +  +  +

Событие onkeypress

Событие onkeypress срабатывает, когда клавиша на клавиатуре нажата и отпущена, что эквивалентно совместному действию onkeydown и onkeyup.

Синтаксис

onkeypress=«скрипт»

Значения

См. скрипт.

Поддержка браузеров

IE.IE ChromeChrome OperaOpera SafariSafari FirefoxFirefox
 +  +  +  +  +

 

Событие onfocus

Событие onfocus возникает при получении элементом фокуса. Например, для текстового поля фокусом называется возможность вводить текст. Событие onfocus по своему действию противоположно onblur.

Синтаксис

onfocus=«скрипт»

Значения

См. скрипт.

Пример

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Событие onfocus</title>
  <style>
   input {
    border: 1px solid #ccc; /* Параметры рамки */
    padding: 3px; /* Поля вокруг текста */
    color: #666; /* Цвет текста */
    width: 90%; /* Ширина поля */
   }
  </style>
 </head>
 <body>
  <form>
   <p><input type="text" class="text" value="Введите текст" 
    onfocus="this.value=''" onblur="this.value='Введите текст'"></p>
   </form>
 </body>
</html>

Результат





Событие onfocus



В данном примере при получении фокуса в текстовом поле пропадает текст, а при потере фокуса (событие onblur), наоборот, в поле добавляется текстовая строка.

Поддержка браузеров

IE.IE ChromeChrome OperaOpera SafariSafari FirefoxFirefox
 +  +  +  +  +

Событие ondblclick

Событие ondblclick возникает при двойном щелчке левой кнопкой мыши на элементе.

Синтаксис

ondblclick=«скрипт»

Значения

См. скрипт.

Пример

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Событие ondblclick</title>
  <style>
   div {
    height: 200px; /* Высота слоя */
    background: #f0f0f0; /* */
    padding: 5px; /* Поля вокруг текста */
    border: 1px solid #333; /* Параметры рамки */
   }
  </style>
  <script>
   var color = 0;
   function colorDiv() {
    if (color) {
      document.getElementById("layer").style.background = "#f0f0f0";
      color = 0;
    }
    else {
      document.getElementById("layer").style.background = "#fc0";
      color = 1;
    }
   }
  </script>
 </head> 
 <body>
  <p>Дважды щелкните в этом поле для изменения цвета фона.</p>
  <div id="layer" ondblclick="colorDiv()">
  </div>
 </body>
</html>

В данном примере при двойном щелчке мышью внутри слоя, фон слоя меняет свой цвет с серого на оранжевый и наоборот.

Поддержка браузеров

IE.IE ChromeChrome OperaOpera SafariSafari FirefoxFirefox
 +  +  +  +  +

Событие onclick

Событие onclick возникает при щелчке левой кнопкой мыши на элементе, к которому добавлен атрибут onclick.

Синтаксис

onclick=«скрипт»

Значения

См. скрипт.

Пример

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Событие onclick</title>
  <script>
   function isEmail() {
    var str = document.getElementById("email").value;
    var status = document.getElementById("status");
    var re = /^[^\s()<>@,;:\/]+@\w[\w\.-]+\.[a-z]{2,}$/i;
    if (re.test(str)) status.innerHTML = "Адрес правильный";
      else status.innerHTML = "Адрес неверный";
    if(isEmpty(str)) status.innerHTML = "Поле пустое";
   }
   function isEmpty(str){
    return (str == null) || (str.length == 0);
   }
  </script>
 </head> 
 <body>
  <form action="">
   <p>Введите адрес электронной почты и нажмите кнопку &laquo;Проверить&raquo;</p>
   <p><input type="text" id="email"> <span id="status"></span></p>
   <p><input type="button" value="Проверить" onclick="isEmail()"></p>
  </form>
 </body>
</html>

В данном примере при щелчке по кнопке формы срабатывает событие onclick и идет вызов функции с именемisEmail(), которая проверяет, корректно ли введен адрес электронной почты.Результат проверки выводится сообщением об ошибке или наоборот, правильности ввода данных.

Результат





Событие onclick


Введите адрес электронной почты и нажмите кнопку «Проверить»


Поддержка браузеров

IE.IE ChromeChrome OperaOpera SafariSafari FirefoxFirefox
 +  +  +  +  +

Событие onchange

Событие срабатывает при изменении значения элемента формы, вроде текстового поля или списка. Например, событие onchange добавленное к элементу <textarea> проявляет себя каждый раз, когда введён новый текст и поле потеряло фокус.

Синтаксис

onchange=«скрипт»

Значения

См. скрипт.

Пример

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Событие onchange</title>
 </head> 
 <body>
  <form action="">
   <fieldset>
    <legend>Быстрый переход по сайту</legend>
    <select onchange="document.location=this.options[this.selectedIndex].value">
      <option value="#">Выберите раздел сайта</option>
      <option value="depart.html">Отделения</option>
      <option value="techinfo.html">Техническая информация</option>
      <option value="study.html">Обучение</option>
    </select>
   </fieldset>
  </form>
 </body>
</html>

В данном примере при выборе пункта списка происходит переход на страницу, заданную значением атрибута value элемента <option>.

Результат




Событие onchange

Быстрый переход по сайту



Поддержка браузеров

IE.IE ChromeChrome OperaOpera SafariSafari FirefoxFirefox
 +  +  +  +  +