СОБЫТИЯ в jQuery

Предисловие

Важно! Представленная здесь информация поможет использовать элементы JavaScript НАПРЯМУЮ(!) в HTML-коде, даже БЕЗ их форматирования специальными тэгами <script></script>, либо подключения jQuery, а просто как АТРИБУТ внутри тэга.
О специфике использования в середине подраздела.   смотреть сразу

И кроме того!  Я разместил здесь полезную(!) информацию, которая позволит любому желающему довольно хорошо изучить веб-технологию jQuery.   смотреть сразу

О событиях

Можно ли использовать jQuery, БЕЗ прописывания событий?

Можно! Только в этом случае пользователь останется "сторонним наблюдателем", и никак не сможет влиять на происходящее.
И вот пример этому: "jQuery Функции hide и show" (откроется в новом окне).

Чтоб предоставить посетителю возможность самому выполнять какие-либо действия на сайте: что-либо выбирать, заказывать и т.д., нужно прописывать события.

* * *

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

Движение мыши, любо перемещение по экрану монитора, клик, двойной клик, нажатие на клавишу клавиатуры и т.д., и т.п..

Браузер фиксирует ВСЁ(!), и любое действие пользователя для него - СОБЫТИЕ!

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

Далее привожу список только самых(!) основных событий, отслеживаемых браузером компьютера. Вообще их больше.

События

Их можно разделить на несколько групп.

Мышь (mouse)

mouseover - "мышь над", т.е., когда навели курсор мыши на что-либо

mouseout - "убрали мышь", т.е., курсор мыши убрали с наведённого

click - "щелчок", клик мыши

dblclick - "двойной щелчок", т.е. двойной клик

mousemove - движение курсора мыши по экрану монитора

mousedown - кнопка мыши нажата (нажата, но НЕ отпущена ещё)

mouseup - кнопку мыши отпустили

Клавиатура (key)

keypress - нажатие клавиши на клавиатуре; всегда делится на 2 нижних события

keydown - событие: нажали клавишу клавиатуры

keyup - событие: отпустили клавишу клавиатуры

Страница (окно Браузера)

load - "загрузка", т.е. это событие происходит, когда браузер загрузит ВСЁ с сервера

resize - изменение размеров, ширины окна браузера

scroll - "прокрутка", прокрутка, т.е. используя скролл страницы

unload - "выгрузка", т.е., когда закрываем страницу, или переходим на новую

copy - "копирование", т.е., когда кто-то пытается скопировать страницу
(P.S.* НЕ ЗАБЫТЬ! про return true; или return false; т.е. МОЖНО/НЕЛЬЗЯ)

Форма (поля, чекбоксы, кнопки и т.д.)

focus - "мышь над", т.е., когда навели курсор мыши на что-либо

blur - "убрали мышь", т.е., курсор мыши убрали с наведённого

change - любое изменение состояния элемента формы

reset - СБРОС введённого в поля

submit - нажатие кнопки submit, т.е., когда форма отправляется PHP-обработчику

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

Список фильтров и их состояний для форм

Список фильтров

ОБЪЕКТ СОБЫТИЯ

Вот, как раз его то браузер и создаёт при каждом нашем "телодвижении", и в него он записывает ВСЮ-ВСЮ информацию о произошедшем событии.

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

Список событий

Для БРАУЗЕРА

.pageX - клик по оси Х

.pageY - клик по оси Y

Для МОНИТОРА

.screenX - клик по оси Х

.screenY - клик по оси Y

Для КЛАВИАТУРЫ

.altKey - использовалась ли клавиша Alt   (вернёт true/false)

.ctrlKey - использовалась ли клавиша Ctrl   (вернёт true/false)

.shiftKey - была ли нажата клавиша Shift   (вернёт true/false)

КАКОЙ(?) объект отреагировал*

.target - КАКОЙ(?) объект отреагировал - это очень важно!

** Пример доступа к объекту события

$('#logo').click(function(eventObject){alert('Был клик по ...');});

То есть, присвоить любое название параметру безымянной функции. Вот оно, как раз, и станет тем ОБЪЕКТОМ, куда браузер ВСЁ ЗАПИСЫВАЕТ.
В литературе чаще всего встречается имя (название) из одной буквы:  e 

Взяв в переменную eventObject.target, можно "вытащить" (узнать) из ответа (он скажет, что это "Объект") обычного JavaScript его реальный  id .

** Пример такой записи

$('#logo').click(function(eventObject){
var myObject = eventObject.target;
alert('Объект имеет ID: ' + myObject.id);});

Получим реальный  id  объекта, а дальше ... ... ?  С ним уже можно работать ... ... !

СОБЫТИЯ при использовании в HTML и обычном(!) JavaScript

Этот способ использования считают "устаревшим" ... ... . Однако!
Старый - не значит плохой! Постоянно встречаю его во всевозможных скриптах. Хотя, конечно, нужно проверять, как популярные браузеры будут к нему относиться. Тем не менее, встречаю его очень часто.

Ради примера прописал в коде HTML нижнюю строчку (здесь сокращено) для тэга картинки:
<img ... onclick="alert('Пример элемента с JavaScript');">
Можно кликнуть по картинке: - появится "модальное окно".

Это простейший пример использования элемента JavaScript НАПРЯМУЮ в коде HTML, в качестве атрибута.

Более интересные, практические примеры такого прописывания JavaScript, привёл на других страницах сайта.
Данные ниже ссылки будут открываться в новом окне.

"Кнопки для сайта" - О том, как можно легко и просто сделать кнопку для своего сайта, БЕЗ использования сложных скриптов.

"Галерея 3" - Создание простых фотогалерей на сайте, опять таки, БЕЗ использования сложных скриптов.

"Галерея на JavaScript" - Галереи, где есть коротенький скрипт, но управляются они с помощью атрибута onclick.

"jQuery Галерея 2" - Эту галерею простой уже назвать нельзя, однако в ней есть очень интересный пример использования атрибута  rel  для ссылок, в котором присутствуют регулировочные значения adjustX и adjustY.

** Впрочем, для обычной галереи, как эта, они ему и НЕ НУЖНЫ, и их можно убрать, а нужен лишь один параметр smallImage, и НЕ ЗАБЫВАТЬ(!) менять идентификаторы у ссылок, иначе все маленькие миниатюры становятся одинаковыми (хотя работают вполне нормально).   Проверено!

Полезная информация

Здесь разместил очень полезную(!) информацию для желающих самостоятельно изучать, осваивать и применять технологию jQuery.

* * *

Справочник jQuery

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

Повторюсь. Мне, для работы, вполне хватает собственного, сделанного непосредственно в процессе обучения, но с большим интересом просматривал этот.

Разместил архив с ним в соответствующем подразделе страницы "Полезное" (откроется в новом окне). Очень может быть, что Вы найдёте там ещё много интересного для себя.

Послесловие

Надеюсь, сделанный мною справочник по основам технологии jQuery будет Вам так же полезен, как и мне.
Хочу закончить его важными(!) напоминаниями с его главной страницы.

* И последнее. Всегда помнить! *

* * *

Нижняя синяя стрелка вернёт на 3-ью страницу справки, посвящённую теме "Методы в jQuery" (действия).

ВВЕРХ