jQuery и события. Использование событий способами jQuery.

jQuery - алгоритм работы с событиями


Работа с событиями с помощью библиотеки jQuery подразумевает последовательное выполнение нескольких действий.

1. Выбрать один или несколько элементов страницы.

2. Назначить событие выборке (присвоить событие).

Делается это так: после выборки ставится точка, затем пишется имя события (например, click) и затем ставятся круглые скобки:

Код
$('a').click();

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

3. Передать функцию событию.

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

Код
$('#start').click(startSlideShow);

Заметьте, что в данном случае для функции не ставятся круглые скобки, как мы это делали при её вызове. Код ниже не сработает:

Код
$('#start').click(startSlideShow());

Наиболее используемый способ - это передача анонимной функции событию. (Освежить о ней знания можно здесь)

При использовании анонимной функции код выше примет такой вид:

Код
$('#start').click(function() {

});

Разберём на простом примере.
Допустим, на странице сайта есть элемент (ссылка) с id = "menu". При наведении на эту ссылку курсора мыши необходимо, чтобы показывался список ссылок (само меню)

Давайте это реализуем:

Выбираем ссылку с id = "menu" :

Код
$('#menu');

Назначаем ей событие наведения мыши:

Код
$('#menu').mouseover();

Добавляем событию анонимную функцию:

Код
$('#menu').mouseover(function() {

});

В анонимную функцию добавляем действия, которые должны происходить в момент запуска события:

Код
$('#menu').mouseover(function() {
  $('#submenu').show();
});

Что мы добавили в анонимную функцию? Мы выбрали элемент с id = "submenu", содержащий ссылки меню и применили к нему функцию show(), показывающую скрытый до этого элемент.

Пример 1. Реализуем вывод модального окна при двойном клике в любом месте страницы.


Так как в данном случае событие применяется ко всей странице, то в качестве элемента выборки будет сам элемент HTML (всё окно браузера), к нему мы и применяем событие двойного клика dblclick():

Код

$(document).ready(function() {
  $('html').dblclick();
});

Передаём функции dblclick() в качестве аргумента анонимную функцию:

Код

$(document).ready(function() {
  $('html').dblclick(function() {

  });
});

В эту анонимную функцию пропишем действия, которые должны происходить при запуске события, а именно: показ модального окна с каким-то текстом:

Код

$(document).ready(function() {
  $('html').dblclick(function() {
  alert('Вы кликнули по странице!');
  });
});

Вы можете проверить работу этого скрипта.

Пример 2. Вывод сообщения при наведении указателя мыши на элемент страницы


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

Итак, для начала выбираем все ссылки на странице сайта:

Код

  <script>
  $(document).ready(function() {
  $('a');
  });
  </script>

Теперь добавляем к выборке событие наведения курсора мыши mouseover и передаём ему анонимную функцию:

Код

  <script>
  $(document).ready(function() {
  $('a').mouseover(function() {

  });
  });
  </script>

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

Первым делом создадим переменную message, в которой положим абзац с текстом:

Код

  <script>
  $(document).ready(function() {
  $('a').mouseover(function() {
  let message = '<p>Вы навели курсор на ссылку</p>';
  });
  });
  </script>

Теперь выберем наш блок с классом .listMessage и с помощью метода append() добавим в его конец наш абзац с текстом:

Код

  <script>
  $(document).ready(function() {
  $('a').mouseover(function() {
  let message = '<p>Вы навели курсор на ссылку</p>';
  $('.listMessage').append(message);
  });
  });
  </script>

Теперь, каждый раз когда вы наводите курсор мыши на какую-то ссылку на странице сайта, вы будете видеть появляющееся сообщение "Вы навели курсор на ссылку".
Можете протестировать этот пример.

Пример 3. Смена текста кнопки при клике на неё


Рассмотрим ещё один интересный пример работы с событиями. На странице сайта у нас есть кнопка с id = "button".

Код
<input name="button" type="button" id="button" value="Кнопка">

Давайте сразу её выберем:

Код
<script>
  $(document).ready(function() {
  $('#button');
  });
  </script>

Добавим событие click для выборки и передадим в него анонимную функцию:

Код

  <script>
  $(document).ready(function() {
  $('#button').click(function() {
   
  });
  });
  </script>

С помощью $(this) и функции val() меняем текст кнопки на "Оппа!", передавая этот текст в качестве аргумента функции:

Код

  <script>
  $(document).ready(function() {
  $('#button').click(function() {
  $(this).val('Оппа!');
  });
  });
  </script>

Как это всё работает можете проверить здесь.

Пример 4. Меняем оформление текстового поля ввода при клике по нему (событие focus())


Имеем на странице сайта текстовое поле ввода с классом .form-control

Код
<input type="text" class="form-control" placeholder="Username">

выбираем его для работы с ним и прикрепляем ему событие focus(), передавая ему анонимную функцию:

Код

  <script>
  $(document).ready(function() {
  $('.form-control').focus(function() {

  });
  });
  </script>

С помощью ключевого слова $(this) определяем элемент, реагирующий на событие и прикрепляем к нему функцию css()

Код

  <script>
  $(document).ready(function() {
  $('.form-control').focus(function() {
  $(this).css();
  });
  });
  </script>

Внутрь данной функции как аргумент передаём объектную константу (список пар свойство : значение), тем самым меняя оформление нашего текстового поля при его активном состоянии.

Код

  <script>
  $(document).ready(function() {
  $('.form-control').focus(function() {
  $(this).css({
  'background-color': '#e67e22',
  'border': '2px solid #ffffff'
  });
  });
  });
  </script>

Протестируйте работу данного скрипта на демо-странице.

Специфичные события jQuery


Событие hover() - а точнее, функция, работающая как событие.
Данная функция принимает два аргумента (две функции), первая из которых выполняется при наведении курсора мыши на элемент, вторая - при смещении курсора мыши с элемента.

Общий синтаксис такой:

Код
$('селектор').hover(функция1, функция2);

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

Рассмотрим пример, как работает hover().
Допустим, на странице сайта есть ссылка с id="menu" и есть скрытое меню с id="submenu", которое становится видимым при наведении курсора мыши на эту ссылку и исчезает вновь при смещении курсора.

Код

  <script>
  $('#menu').hover(
  function() {
  $('#submenu').show();
  },
  function() {
  $('#submenu').hide();
  }
  );
  </script>

Итак, разберём этот код. Мы выбираем нашу ссылку и назначаем ей функцию hover(), внутри которой как аргументы прописываем две анонимные функции.
Первая выбирает элемент с id="submenu" и добавляет выборке функцию show(), за счёт чего скрытое меню становится видимым (момент наведения курсора мыши на ссылку).
При смещении курсора мыши с ссылки включается в работу вторая анонимная функция, которая к той же выборке добавляет функцию hide(), за счёт чего меню снова становится скрытым.

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

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

Мы можем взять код из примера выше и просто заменить функцию hover() на toggle(), теперь скрытое меню будет показываться и скрываться при клике на ссылку с id="menu":

Код

  <script>
  $('#menu').toggle(
  function() {
  $('#submenu').show();
  },
  function() {
  $('#submenu').hide();
  }
  );
  </script>



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


Когда запускается событие, в браузере записывается о нём информация, которая собирается в момент, когда это событие произошло.
Информация эта записывается в объект события. Что это может быть за информация? Например, координаты указателя мыши как по горизонтали, так и по вертикали, элемент, инициировавший это событие, была ли нажата, к примеру, клавиша Shift при запуске события.

Данный объект события доступен для функции, которая создана для обработки этого события. Этот объект передаётся функции как аргумент, вам достаточно лишь добавить функции имя параметра, например event (имя может быть любым другим, к примеру, evt или e) :

Код

$(document).click(function(event) {

});

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

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

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

Код

$(document).click(function(event) {
  let xPosition = event.pageX;
  let yPosition = event.pageY;
  alert('Координата по Х :' + xPosition + ' Координата по Y : ' + yPosition );
});

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

Отмена обычного поведения событий


В браузере имеются заранее запрограммированные реакции на отдельные события, например, при клике на ссылку загружается новая страница и т . п.
Но что если при клике на ту же ссылку нам не нужно загружать какую-то страницу, а нужно, к примеру, чтобы показалось скрытое меню?

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

Разберём пример. На странице сайта есть ссылка с id="menu", при клике на которую открывается другая страница с меню (для того, чтобы пользователь, у которого отключен JavaScript в браузере смог увидеть это меню).
Вы добавили код JavaScript, за счёт которого при клике на эту ссылку меню появляется на этой же странице (для посетителей, у которых JavaScript включен).

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

Код

$('#menu').click(function(event) {
  /* здесь ваш JS код */
  event.preventDefault(); /* отменяем переход по ссылке */
});

Можно обойтись и без функции preventDefault() и просто вместо неё добавить возврат результата выполнения функции события как false:

Код

$('#menu').click(function(event) {
  /* здесь ваш JS код */
  return false; /* отменяем переход по ссылке */
});

Удаление событий


Иногда требуется удалить ранее назначенные какой-то выборке события. Делается это с помощью функции unbind().
Например, чтобы удалить назначенное ранее событие клика для всех ссылок страницы:

Код

$('a').unbind('click');

То есть к этой выборке добавляется функция unbind(), в которую передаётся имя удаляемого события в виде строки.

Конкретный пример работы: на странице всем ссылкам добавлено событие наведения курсора мыши, в результате чего при наведении указателя мыши на ссылку возникает модальное окно с текстом "Ссылка!"

Код

$('a').mouseover(function() {
  alert('Ссылка!');
});

Дадим возможность пользователю отключить это безобразие, нажав на кнопку с id="deactivate":

Код

$('#deactivate').click(function() {
  $('a').unbind('click');
});

Теперь событие mouseover() удалено со всех ссылок и модальное окно появляться при наведении мыши на ссылку не будет. Протестируйте этот скрипт в работе.



Всплытие события


Рассмотрим пример: есть какая-то картинка с классом .images, которая лежит внутри тега div с классом .image_block. Для картинки задано событие клика и для тега div также задано событие клика.
При клике на картинку должен выводиться текст "Клик по картинке", при клике на div - текст "Клик по блоку". Текст выводится в отдельном блоке с классом .text_block:

Код

  <script>
  $(function() {
  $('.image_block').click(function() {
  $('.text_block').append('Клик по блоку');
  });
  $('.images').click(function() {
  $('.text_block').append('Клик по картинке');
  });
  });
  </script>

Так вот, если сейчас кликнуть по картинке, то в текстовом блоке мы увидим два сообщения: "Клик по картинке" и "Клик по блоку".
Это значит, что на одно и то же событие (в данном случае событие click() ) могут реагировать сразу несколько элементов.
Данное явление называется всплытием события. И если вы не хотите, чтобы, например, при клике на изображение срабатывал клик на блоке, воспользуйтесь функцией jQuery, которая называется stopPropagation().

Функция stopPropagation() является методом объекта события и доступ к ней вы получаете в рамках функции, обрабатывающей событие.
Как она работает? Разберём на нашем примере с изображением. Если мы добавим данную функцию после основного кода нашей анонимной функции:

Код

  $('.images').click(function(event) {
  $('.text_block').append('Клик по картинке');
  event.stopPropagation();
  });

То после того, как мы кликнем по картинке, функция добавит в текстовый блок текст "Клик по картинке" и после этого остановит событие клика, не дав ему распространиться на блок div, в котором лежит наша картинка.

На данной демо-странице вы можете наглядно посмотреть всплытие события на примере картинки с автомобилем. Она заключена в блок div. Если вы кликнете на белое поле вокруг картинки, вы увидите текст "Клик на блоке", если же кликните по самой картинке, то увидите два сообщения "Клик по картинке" и "Клик по блоку".

В правой части, где картинка с самолётом, применена функция stopPropagation(), поэтому если вы кликаете по изображению, вы видите только текст "Клик по изображению".

Функция bind()


Формат данной функции:

Код
$('селектор').bind('событие', данные, имяФункции);

Таким образом, метод bind() более гибкий способ работы с событиями: в круглых скобках вы указываете имя события в виде строки (например, 'click'), функцию для реакции на него, а также данные для использования функцией, обрабатывающей событие (в форме объектной константы, либо переменной, в которой лежит объектная константа).

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

Передача данных для функции bind() не является обязательной,в таком случае просто указывается имя события и функция (анонимная или именованная):

Код
$('селектор').bind('событие', имяФункции );

Чтобы показать в чём гибкость работы метода bind(), разберём такой пример: создадим всплывающее окно в ответ на событие, при этом текст сообщения в окне будет зависеть от элемента, вызвавшего событие.

Как это можно сделать? Как вариант, создать разные объектные константы и сохранить их в различных переменных, которые затем можно передавать функции bind():

Код

  let linkMessage = {message: 'Привет от ссылки'};
  let pMessage = {message: 'Привет от абзаца'};

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

Код

  function showMessage(event) {
  alert(event.data.message);
  }

В этом коде event.data - это свойство объекта event, в которое передаётся значение свойства message.
И вот каким образом мы реализуем вывод разных сообщений в зависимости от элемента, инициировавшего событие:

Код

  $('a').bind('click', linkMessage, showMessage);
  $('p').bind('mouseover', pMessage, showMessage);

Так как использование переменных равносильно использованию их содержимого, то код выше фактически означает что:

Код

  $('a').bind('click', {message: 'Привет от ссылки'} , showMessage);
  $('p').bind('mouseover', {message: 'Привет от абзаца'} , showMessage);

Функция bind() позволяет привязывать два и более событий к одной и той же функции. Например, вывести всплывающее окно как при клике, так и при наведении курсора мыши на ссылку:

Код

$('a').bind('click mouseover', function() {
  alert('Привет!');
});

Просто перечислите имена событий через пробел и анонимная функция выполнится при запуске любого из них.

Если же вы хотите не только присоединить несколько разных событий, но и сделать так, чтобы каждое из них запускало разные действия, можно передать функции bind() объектную константу из имён событий, разделённых двоеточием с анонимными функциями:

Код

  <script>
  $(function() {
  $('a').bind({

  'click' : function() {
  alert('Привет!');
  },

  'mouseover' : function() {
  $('p.textMessage').append('Вы навели курсор');
  }

  });
  });
  </script>

В данном примере первая функция выводит на странице окно с текстом "Привет", а вторая выводит текст в конце абзаца с классом .textMessage.


Формат функции on() похожий:

Код
$('селектор').on('событие', селектор, данные, имяФункции);

Добавлен лишь ещё один параметр, селектор, вы можете его использовать, чтобы, например, применить событие к другому элементу в рамках выделенного элемента. (делегирование события)

Делегирование событий с помощью функции on()


Как вы увидели выше, общий синтаксис функции on() такой:

Код
$('селектор').on('событие', селектор, данные, имяФункции);

При этом второй аргумент функции (селектор) может быть любым действительным селектором jQuery (например, идентификатора, класса, элемента и т.д)

Без передачи селектора событие применяется к первоначальному селектору (к выборке). Важно, что метод on() работает только если элемент уже присутствует на странице.
Если HTML-код добавляется динамически после обработчиков событий типа on(), click(), mouseover(), то к новым элементам такого HTML-кода никакие обработчики присоединены не будут!

Например, вы создали приложение для пользователя, в которое он может добавлять список задач, и по мере их выполнения вычёркивать завершённые задачи.
На начальном этапе этот список пуст и добавление каждой задачи - это добавление нового элемента li в список ul.

Чтобы реализовать возможность зачёркивания выполненных задач, нужно к каждому элементу li добавить событие клика, чтобы при клике на этом элементе его стиль изменялся (зачёркивался текст например).
Но при загрузке страницы на ней нет элементов li, поэтому обработчик события click к ним не применится.

Поэтому мы делегируем событие click к родительскому элементу, тегу ul (он уже есть на странице). Затем мы будем просто отслеживать это событие на дочерних элементах (li)

Код
$('ul').on('click', 'li', function() {
  $(this).css('text-decoration' : 'line-through');
});

Комментарии к материалу: