Js действие при наведении. Управление веб-страницей с помощью событий jQuery

SSH (англ. Secure SHell - «безопасная оболочка») - сетевой протокол сеансового уровня, позволяющий производить удалённое управление операционной системой и туннелирование TCP-соединений (например, для передачи файлов). Схож по функциональности с протоколами Telnet и rlogin, но, в отличие от них, шифрует весь трафик, включая и передаваемые пароли. SSH допускает выбор различных алгоритмов шифрования. SSH-клиенты и SSH-серверы доступны для большинства сетевых операционных систем.

SSH позволяет безопасно передавать в незащищенной среде практически любой другой сетевой протокол. Таким образом, можно не только удаленно работать на компьютере через командную оболочку, но и передавать по шифрованному каналу звуковой поток или видео (например, с веб-камеры). Также SSH может использовать сжатие передаваемых данных для последующего их шифрования, что удобно, например, для удаленного запуска клиентов X Window System.

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

Первая версия протокола, SSH-1, была разработана в 1995 году исследователем Тату Улёненом из Технологического университета Хельсинки, Финляндия. SSH-1 был написан для обеспечения большей конфиденциальности, чем протоколы rlogin, telnet и rsh. В 1996 году была разработана более безопасная версия протокола, SSH-2, несовместимая с SSH-1. Протокол приобрел ещё большую популярность, и к 2000 году у него было около двух миллионов пользователей. В настоящее время под термином «SSH» обычно подразумевается именно SSH-2, т.к. первая версия протокола ввиду существенных недостатков сейчас практически не применяется.

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

Я хочу, чтобы вы хорошенько разобрались в таких событиях, как click, mouseup, mousedown, mouseover и других, поняли разницу между ними и научились их использовать для решения поставленных задач. Конечно же после каждого ключевого теоретического материала вы сможете найти программную реализацию примеров. Ну что ж, приступим!

Все сведенья о событиях мышки

Для мыши существует несколько событий, которые полностью охватывают всевозможные действия курсора на странице . Среди них есть те, которые срабатывают при нажатии на объект, наведении на него или движении указателя по открытому окну. Их все можно поделить на две группы: простые и комплексные (составные) события.

Начнем с простого

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

Наименование	Описание
mousedown	Названный event вызывается, когда одна из кнопок мышки нажата, но пока еще не отпущена.
mouseup	А этот срабатывает уже при отпускании зажатой ранее кнопочки.
mouseover	Вызывается при наведении курсора на обрабатываемый объект.
mouseout	Обрабатывает действие выхода курсора из области элемента.
mousemove	Любое движение указателя над определенной областью вызывает текущее событие.

Ну а теперь для закрепления материала разберем пример. Я создал небольшую программку, в которой изменяются эмоции смайла при наведении и отведении курсора.

Наведите на изображение курсор мыши и оно изменится. А теперь отведите его в сторону и понаблюдайте за изменениями function ChangeOver(x) { x.src= "http://storage2.vsemayki.ru/images/0/0/514/514012/previews/sign_front_white_500.jpg"; }; function ChangeOut(x) { x.src= "http://storage2.vsemayki.ru/images/0/0/514/514102/previews/sign_front_white_500.jpg"; }

Пришло время группировки

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

Почему же так? Ответ достаточно прост.

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

Итак, ниже перечислены составные события.

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

Пример наведения указателя на элемент страницы

Пример наведения указателя на элемент страницы Нажмите на меня один раз и смайл улыбнется! А теперь нажмите на меня двойным кликом и смайл начнет двигаться! Если хочешь вернуться к начальному состоянию, то нажми на меня правой кнопкой! function Smile() { document.getElementById("pic").src= "http://storage2.vsemayki.ru/images/0/0/514/514012/previews/sign_front_white_500.jpg"; }; function Cry() { document.getElementById("pic").src= "http://storage2.vsemayki.ru/images/0/0/514/514102/previews/sign_front_white_500.jpg"; }; function Move() { document.getElementById("pic").src= "https://otvet.imgsmail.ru/download/197747824_e708b2123d2b2d745d271f15cb144dcc_800.gif"; };

Как видите, все очень просто. Данные элементы легко вызывать в коде и привязывать их к определенным действиям.

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

Момент, в который произошло событие, называется запуском события . События могут срабатывать при выполнении различных операций с веб-страницей. Помимо этого, и сам браузер может стать источником событий.

Управление веб-страницей с помощью событий jQuery 1. События мыши

.click()
Это событие запускается, когда вы нажимаете и отпускаете кнопку мыши. Применяется к ссылкам, картинкам, кнопкам, абзацам, блокам и т.д.

.dblclick()
Событие запускается, когда вы дважды нажимаете и отпускаете кнопку мыши, например, открываете какую-нибудь папку на рабочем столе.

.mousedown()
Событие происходит во время нажатия кнопки мыши, например, при перетаскивании элементов.

.mousemove()
Событие запускается, когда вы передвигаете указатель мыши по странице.

.mouseout()
Событие запускается, когда вы уводите указатель мыши с элемента.

.mouseover()
Событие запускается, когда вы проводите указателем мыши по элементу (аналогично использованию псевдокласса:hover).

.mouseup()
Событие активизируется, когда вы отпускаете кнопку мыши.

2. События документа/окна

.load()
Событие запускается, когда браузер загрузит все файлы веб-страницы: html-файлы, внешние css и javascript файлы, медиа-файлы. Это может быть неудобно в случае если веб-страница содержит большое количество файлов. Для решения данной проблемы можно воспользоваться функцией ready() , которая запускает скрипты сразу после загрузки html-кода.

.resize()
Событие запускается, когда вы изменяете размер окна браузера.

.scroll()
Событие запускается, когда вы используете полосы прокрутки, либо прокручиваете веб-страницу с помощью колесика мыши, или же используете для этих целей клавиши клавиатуры (pg up, pg dn, home, end).

.unload()
Событие запускается, когда вы собираетесь покинуть страницу, щелкая по ссылке для перехода на другую страницу, закрываете вкладку страницы или же окно браузера.

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

.blur()
Событие запускается, когда поле формы выводится из фокуса, т.е. вы ввели данные в поле формы и перешли на другое.

.change()
Событие запускается при изменении статуса поля формы, например при выбора пункта из выпадающего меню.

.focus()
Событие запускается при переходе в поле формы, щелкая в нем кнопкой мыши или клавишей табуляции.

.reset()
Событие позволяет вернуть форму в первоначальное состояние, отменив сделанные изменения.

.select()
Событие запускается, когда вы выделяете текст внутри текстового поля формы.

.submit()
Событие запускается, когда вы отправляете заполненную форму с помощью щелчка по кнопке «Отправить» или нажатия клавиши «Enter», когда курсор помещен в текстовом поле.

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

.keydown()
Событие запускается при нажатии клавиши, перед событием keypress.

.keypress()
Событие запускается, когда вы нажимаете на клавишу, до тех пор, пока вы не отпустите клавишу.

.keyup()
Событие запускается, когда вы отпускаете клавишу.

5. События jQuery

.hover()
Данная функция работает как событие, позволяя одновременно решить две задачи, связанные с событием наведения указателя мыши и событием снятия указателя мыши в отношении выбранного объекта. Основная структура функции:
$("#селектор").hover(функция1, функция2);

.toggle()
Событие работает аналогично событию hover() , с разницей в том, что событие запускается от щелчка кнопкой мыши. Например, можно открыть выпадающее меню одним щелчком и скрыть вторым.

6. Объект события

При запуске события браузер сохраняет информацию о нём в объекте события . Объект события содержит данные, собранные в момент, когда событие произошло. Обработка события происходит с помощью функции, при этом объект передается функции как аргумент — переменная evt (в качестве имени переменной можно использовать также event или просто e). Чтобы получить доступ к аргументу, необходимо добавить к функции имя параметра. В пределах данной функции можно получить доступ к различным свойствам, используя точечный синтаксис. Когда функция вызывается, то объект события сохраняется в переменной evt .
Объект события имеет различные свойства, наиболее распространённые из них описаны в нижеприведенной таблице.

Таблица 1. Свойства объекта события Свойство Описание

pageX	Расстояние (px) от указателя мыши до левого края окна браузера
pageY	Расстояние (px) от указателя мыши до верхнего края окна браузера
screenX	Расстояние (px) от указателя мыши до левого края монитора
screenY	Расстояние (px) от указателя мыши до верхнего края монитора
shiftKey	TRUE, если когда происходило событие, была нажата клавиша SHIFT
which	Используется для определения числового кода нажатой клавиши (вместе с shiftKey)
target	Означает, что по объекту события щелкнули кнопкой мыши (например, для события click())
data	Объект, использованный с функцией bind() для передачи данных функции, управляющей событием