Логотип Валидатор Валидатор Качество создания сайта

СОБЫТИЯ в jQuery


Предисловие

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

Кроме того!  Разместил здесь полезнейшую(!) информацию, которая позволит любому желающему хорошо изучить любую веб-технологию БЕСПЛАТНО!   смотреть сразу


О событиях

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

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

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

* * *

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

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

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

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

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

События

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

Мышь (mouse)

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

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

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

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

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

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

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

    **Prim. Нижние 2 события (комплексные) есть только в jQuery!

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

toggle - "переключатель" для кликов, т.е. события: 1-ый клик, после 2-ой клик

Могут принимать в себя (в свои параметры) через , (запятую) 2 функции.

** Пример написания

$('moto_table tr').hover(function(){
$(this).addClass('svet');},
function(){$(this).removeClass('svet');});

Конструкция $(this) - означает: текущий элемент, этот, принадлежащий данному объекту, который мы отобрали в первой строке выражения.
Она равносильна счётчику в циклах обычного JavaScript, типа: myArray[i]

Внимание! Функция в параметрах события .hover() нужна ОБЯЗАТЕЛЬНО(!), т.к. "напрямую" в параметрах действия НЕ пишут (не сработает).

Клавиатура (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 - клик по оси У

Для МОНИТОРА

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

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

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

.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

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

НЕ ЗАБЫВАТЬ!   В этом случае к событию добавляется приставка on, то есть, если в скрипте jQuery будет правильно click, то там нужно писать onclick

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

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

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

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

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

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

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

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



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

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

Прежде всего - ресурс самого создателя обучающего курса "JavaScript + jQuery", благодаря которому удалось сделать и этот справочник, да и вообще всё, что Вы могли видеть на моих сайтах.

Авторские уроки по созданию сайтов Великолепно!

БЕСПЛАТНО! Здесь Вы найдёте ВСЁ! Нижняя кнопка-рисунок перенаправит Вас на сайт, который я считаю настоящим "Клондайком".
Чего там только нет! Уроки по PHP, Joomla, JavaScript и jQuery, WORDPRESS, и т.д., и т.п..
Сможете выбрать сами, что Вам нужно.
(откроется в новом окне)

Уроки

* * *

Справочник jQuery

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

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

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



Послесловие

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

Функция ожидания формирования DOM-дерева

Пока DOM-дерево НЕ ПОСТРОЕНО, НЕ ДОЛЖНЫ ПЫТАТЬСЯ использовать скрипт. (Убирал строчку скрипта в конец страницы.)

Теперь этого делать не нужно. У jQuery есть конструкция "ожидания" (специальный метод ready), в которой прописано: "Дождаться построения DOM-дерева, а затем исполнять ВСЕ скрипты."

$(document).ready(function() { Здесь ВСЁ-ВСЁ-ВСЁ, все скрипты });

Есть сокращённая запись.

$(function() { Здесь ВСЁ-ВСЁ-ВСЁ, все скрипты });

**P.S. Лучше не забывать в конце конструкции ставить комментарий   //конец ready На странице (в файле скриптов) может быть НЕ ОДИН модуль с такой конструкцией.

КОММЕНТАРИИ:   /* ... ... ... */ - многострочные     // ... ... - однострочные.

**Всегда(!) держать в голове схему: Объект - Событие - Действие


Очень важно!

Не все версии плагинов подходят к, пусть даже самой свежей, версии jQuery!

П Р О В Е Р Е Н О !!!   И всегда проверять СОВМЕСТИМОСТЬ!

И ещё раз - С И Н Т А К С И С ! (т.е.   ; . , : ] } ) ' " пробелы   и т.д.)

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

jQuery - клиентский скрипт! Работает только в браузере пользователя. Никакие её скриптовые "ухищрения" HTML-код НЕ МЕНЯЮТ!

* * *

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

на МЕТОДЫ

ВВЕРХ

Все права защищены. Copyright © 2009 - 2017 Коротеев Владимир.

Protected by Copyscape Duplicate Content Check
Яндекс.Метрика
Рейтинг@Mail.ru