Наше прошлое 20072009201120132014
г. Москва, ул. Гостиничная, д. 7А. кор.2
8 (499) 404-26-56
пн-пт 11:00 - 19:00
 

События JavaScript

При любом действии пользователя, во время просмотра сайта, происходит какое либо событие. Например, при клике на кнопку, изменении текста в текстовом поле, вождение мышки по экрану и т.д. На все эти на события можно реагировать при помощи JavaScript.

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

События для мышки

Событие onclick

Событие onclick происходит при клике, например на кнопку, картинку или любой другой элемент. Например:

<input type="button" value="Кликните на меня!"
     onclick="alert('Событие onclick происходит при клике. Дизайн студия OX2')" />

Событие ondblclick

Событие ondblclick работает аналогично событию onclick, но нужен двойной клик, например:

<div style="width:200px;height:100px;background-color:black; color: white;" 
ondblclick="alert('Событие ondblclick происходит при двойном клике. Дизайн студия OX2')">
        Сделайте двойной клик на блок
    </div>
Сделайте двойной клик на блок

Событие onmouseover, onmouseout, onmousemove

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

<img src="/images/articles/forum.png" onmouseover="this.src='/images/articles/forum_s.png'" 
onmouseout="this.src='/images/articles/forum.png'" alt="" />

При наведении мыши на картинку меняем свойство src. И когда убираем мышку с картинки, возвращаем старую картинку.

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

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

Событие onkeydown, onkeyup, onkeypress

Событие onkeydown происходит при нажатии клавиши, когда клавиша нажата. Событие onkeyup происходит так же при отпускании клавиши. Событие onkeypress происходит аналогично onkeydown, основное отличие только в том, что keypress не ловит клавиши F1-F12 и другие, ловит в основном только символьные клавиши.

Событие onkeydown

<input type="text" onkeydown="alert('Событие onkeydown. Дизайн студия OX2')" />


Событие onkeyup

<input type="text" onkeyup="alert('Событие onkeyup. Дизайн студия OX2')" />


Событие onkeypress

<input type="text" onkeypress="alert('Событие onkeypress. Дизайн студия OX2')" />

События при изменении состояния элементов

Событие onchange

Событие onchange происходит при изменении элементов формы. Например, в текстовом поле написали текст, или в списке select выбрали другой параметр.
Вот небольшой пример, при изменении текстового поля, показываем сообщение:

<input type="text" onchange="alert('Текст был изменен. Дизайн студия OX2')" />

Как ни странно, но не только написание текстов на сайт является очень полезным фактором для продвижения сайта, но и события для этого тоже очень важны. Чем интересней сайт, тем человек на нем дольше задерживается, и этим самым улучшает поведенческий фактор сайта. Создавайте интересные сайты, и тогда их будет проще и дешевле продвинуть в поисковых системах.

При любом действии пользователя, во время просмотра сайта, происходит какое либо событие. Например, при клике на кнопку, изменении текста в текстовом поле, вождение мышки по экрану и т.д. На все эти на события можно реагировать при помощи JavaScript.

Комментарии

Нет комментариев

Заполните все поля

Написать комментарий

Ваше имя

Комментарий