Основы событий в jQuery

Введение

Добро пожаловать в документацию по jQuery! В этом практическом занятии вы познакомитесь с событиями в jQuery.

jQuery предоставляет простые методы для прикрепления обработчиков событий к элементам, выбранным с помощью селекторов. Когда событие возникает, выполняется функция, переданная в качестве обработчика. Внутри этой функции this ссылается на DOM-элемент, который инициировал событие.

Функция обработки события может получать объект события. Этот объект можно использовать для определения характера события и для предотвращения стандартного поведения при этом событии.

Skills Graph

Настройка реакций на события для DOM-элементов

В ВМ уже предоставлен index.html.

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

jQuery предлагает удобные методы для большинства событий браузера. Эти методы — включая .click(), .focus(), .blur(), .change() и др. — являются сокращением для метода .on() jQuery. Метод on полезен для связывания одной и той же функции обработчика с несколькими событиями, когда вы хотите передать данные в обработчик события, когда работаете с пользовательскими событиями или когда хотите передать объект с несколькими событиями и обработчиками.

// Настройка события с использованием удобного метода
$("p").click(function () {
  console.log("You clicked a paragraph!");
});

// Эквивалентная настройка события с использованием метода `.on()`
$("p").on("click", function () {
  console.log("click");
});

Пожалуйста, нажмите на кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем можно обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Расширение событий на новые элементы страницы

Важно отметить, что .on() может создавать только слушатели событий на элементах, которые существуют в момент настройки слушателей. Например:

$(document).ready(function () {
  // Теперь создаем новый элемент кнопки с классом alert.
  $("<button class='alert'>Alert!</button>").appendTo(document.body);
  // Настраиваем поведение при нажатии на все элементы кнопки с классом alert,
  // которые существуют в DOM при выполнении инструкции
  $("button.alert").on("click", function () {
    console.log("A button with the alert class was clicked!");
  });
});

Если подобные элементы создаются после настройки слушателей событий, они не автоматически будут иметь событийные поведения, которые вы ранее настроили.

Вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Настройка нескольких реакций на события

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

// Несколько событий, одна и та же обработчик
$("div").on(
  "click change", // Привязываем обработчики для нескольких событий
  function () {
    console.log("An input was clicked or changed!");
  }
);

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

// Привязка нескольких событий с разными обработчиками
$("div").on({
  click: function () {
    console.log("clicked!");
  },
  mouseover: function () {
    console.log("hovered!");
  }
});

Вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Резюме

Поздравляем! Вы завершили практическое занятие по основам событий в jQuery. Чтобы узнать больше о jQuery API, пожалуйста, ознакомьтесь с официальной документацией jQuery.