Resize - интерфейсы веб api

Производительность событий

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

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

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

Кнопка «показать еще»

В этом примере часть контента с классом скрывается и показывается нажатием на кнопку или любой другой элемент с классом

Каждая кнопка и скрытый текст должны находиться в контейнере

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

CSS в этом примере не выкладываю, т.к. оформление тут индивидуальное, но если кому нравится эта кнопка, ее код представлен ниже.

<div class=»content-block»>
<p>Видимый текст</p>
<button class=»show-more»>Показать еще</button>
<p class=»hide-content»>Скрытый текст</p>
<p class=»hide-content»>Скрытый текст</p>
</div>

1
2
3
4
5
6

<p>Видимый текст</p>

<button class=»show-more»>Показать еще</button>

<p class=»hide-content»>Скрытый текст</p>

</div>

Или:

<div class=»content-block»>
<p>Видимый текст</p>
<p class=»hide-content»>Скрытый текст</p>
<p class=»hide-content»>Скрытый текст</p>
<button class=»show-more»>Показать еще</button>
</div>

1
2
3
4
5
6

<p>Видимый текст</p>

<p class=»hide-content»>Скрытый текст</p>

<button class=»show-more»>Показать еще</button>

</div>

Другими словами, где располагается кнопка и скрытый текст — не важно. $(«.content-block»).each(function() {
let more = $(this).find(«.show-more»);
let hide = $(this).find(«.hide-content»);
hide.hide();
more.click(function() {
hide.slideToggle();
more.text(more.text() == «Скрыть» ? «Показать еще» : «Скрыть»);
});
});

$(«.content-block»).each(function() {
let more = $(this).find(«.show-more»);
let hide = $(this).find(«.hide-content»);
hide.hide();
more.click(function() {
hide.slideToggle();
more.text(more.text() == «Скрыть» ? «Показать еще» : «Скрыть»);
});
});

1
2
3
4
5
6
7
8
9

$(«.content-block»).each(function(){

let more=$(this).find(«.show-more»);

let hide=$(this).find(«.hide-content»);

hide.hide();

more.click(function(){

hide.slideToggle();

more.text(more.text()==»Скрыть»?»Показать еще»»Скрыть»);

});

Более простой вариант, при котором кнопка откроет текст ниже нее, будет выглядеть так:

<p>Видимый текст</p>
<button class=»show-more»>Показать еще</button>
<p class=»hide-content»>Скрытый текст</p>

1
2
3

<p>Видимый текст</p>

<button class=»show-more»>Показать еще</button>

<p class=»hide-content»>Скрытый текст</p>

$(«.hide-content»).hide();
$(«.show-more»).click(function() {
$(this).next(«.hide-content»).slideToggle();
$(this).text($(this).text() == «Скрыть» ? «Показать еще» : «Скрыть»);
});

1
2
3
4
5

$(«.hide-content»).hide();

$(«.show-more»).click(function(){

$(this).next(«.hide-content»).slideToggle();

$(this).text($(this).text()==»Скрыть»?»Показать еще»»Скрыть»);

});

Всплытие и метод event.composedPath()

Для обеспечения всплытия событий используется развёрнутый DOM.

Таким образом, если у нас есть элемент в слоте, и событие происходит где-то внутри него, то оно всплывает до и выше.

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

В примере выше развёрнутое DOM-дерево будет таким:

Так что, при клике по вызов метода вернёт массив: . Что в точности отражает цепочку родителей от целевого элемента в развёрнутой DOM-структуре после композиции.

Детали теневого DOM-дерева доступны только для деревьев с

Если теневое DOM-дерево было создано с , то после композиции путь будет начинаться с элемента-хозяина: и дальше вверх по дереву.

Этот метод следует тем же принципам, что и остальные. Внутреннее устройство закрытых DOM-деревьев совершенно скрыто.

Как переместить элемент в jQuery

Если вам нужно именно переместить элемент, а не скопировать, то в jQuery это можно выполнить посредством использования нескольких методов.

Пример:

<div class="content-1">
  <p>...</p>
  <button id="move">Переместить кнопку в .content-2</button>
</div>
<div class="content-2">
  <p>...</p>
</div>

<script>
  $('#move').detach().appendTo('.content-2');

  // после выполнения:
  // <div class="content-1">
  //   <p>...</p>
  // </div>
  // <div class="content-2">
  //   <p>...</p>
  //   <button id="move">Переместить кнопку в .content-2</button>
  // </div>
</script>

Как в этом примере осуществляется перемещение? Сначала мы получаем элемент, который мы хотим переместить, в данном случае «#move». После этого вызываем метод , который удалит элемент из текущего места. В качестве результата он нам возвратит удалённый элемент. Далее удалённый элемент с помощью метода вставляем в нужное место.

Блокировщик всплывающих окон

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

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

Как же браузер понимает – посетитель вызвал открытие окна или нет?

Для этого при работе скрипта он хранит внутренний «флаг», который говорит – инициировал посетитель выполнение или нет. Например, при клике на кнопку весь код, который выполнится в результате, включая вложенные вызовы, будет иметь флаг «инициировано посетителем» и попапы при этом разрешены.

А если код был на странице и выполнился автоматически при её загрузке – у него этого флага не будет. Попапы будут заблокированы.

Пример JSON JQuery.each()

У нас могут быть более сложные структуры данных, такие как массивы в массивах, объекты в объектах, массивы в объектах или объекты в массивах. Давайте рассмотрим, как jQuery find each может применяться в подобных сценариях:

var json = ;
$.each(json, function () {
   $.each(this, function (name, value) {
      console.log(name + '=' + value);
   });
});

Результат выполнения кода: red=#f00, green=#0f0, blue=#00f.

Мы обрабатываем структуру с помощью вложенного вызова each(). Внешний вызов обрабатывает массив переменной JSON, внутренний вызов обрабатывает объекты. В этом примере каждый jQuery each element имеет только один ключ. Но с помощью представленного кода может быть присвоено любое количество ключей.

Как создать элемент в jQuery?

Создание элементов в jQuery осуществляется посредством передачи HTML-строки в главную функцию этой библиотеки.

Синтаксис создания элементов из HTML-строки:

jQuery( html  )

Он имеет 2 параметра. Первый () обязательный. Здесь указывается HTML-строка, на основе которой нужно создать соответствующие элементы. Второй () не обязательный. Он необходим для указания документа, в котором необходимо создать элементы. По умолчанию элементы создаются в том же документе, в который была загружена библиотека jQuery. Если вы хотите внедрить элементы в другой документ, то его явно необходимо указать с помощью этого параметра.

Пример создания элемента из HTML-строки:

$('<div class="alert-message">Новый текст сообщения.</div>')

Пример создания элемента не в документе, в который была загружена библиотека jQuery, а в другой :

$('<div>Новый элемент</div>', $('#include').prop('contentWindow').document)

Пример создания нескольких элементов из HTML-строки:

$('<figure>' +
  '<img src="cat_in_hat.png" alt="Кот в шляпе">' +
  '<figcaption>Кот в шляпе</figcaption>' +
'</figure>')

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

Этот способ создания элементов можно использовать только в том случае, если вы полностью доверяете источнику. Если же вы не уверены в источнике, из которого берёте HTML данные, то обязательно применяйте поэлементный способ создания нужного фрагмента.

Синтаксис создания HTML элемента:

jQuery( html )

Он имеет 2 параметра. Первый параметр () является обязательным. В нём указывается строка, описывающая HTML элемент, который необходимо создать. Например для создания элемнта , она описывается как или как . Второй параметр () является дополнительным. В нём задаются в формате объекта атрибуты, обработчики событий и методы которые нужно добавить или связать с только что созданным элементом.

Cоздадим элемент используя синтаксис jQuery для создания HTML элемента:

$('<div class="alert-message">Новый текст сообщения.</div>')
// поэлементное создание HTML-кода представленного строчкой выше
$('<div>', {
  'class': 'alert-message',
  text: 'Новый текст сообщения.'
})

Cоздадим HTML фрагмент, используя поэлементый способ создания:

$('<figure>' +
  '<img src="cat_in_hat.png" alt="Кот в шляпе">' +
  '<figcaption>Кот в шляпе</figcaption>' +
'</figure>')
// поэлементное создание HTML-кода представленного строчками выше
$('<figure>')
  .append('<img>', {
    src: 'cat_in_hat.png',
    alt: 'Кот в шляпе'
  })
  .append('<figcaption>', {
    text: 'Кот в шляпе'
  });

С методом познакомимся ниже. Он в этом коде используется чтобы добавить элементы и в элемент .

Как открыть внешние ссылки в новой вкладке в WordPress

С WordPress у вас есть несколько вариантов для достижения этой цели. Мы рассмотрим, как вы можете вручную настроить внешние ссылки для открытия в новой вкладке или окне в WordPress. Затем мы рассмотрим, как вы можете использовать код или плагин для автоматизации процесса. Давайте посмотрим на эти различные методы ниже.

Установить ссылки для открытия в новой вкладке вручную (для WordPress)

Вы можете легко настроить внешние ссылки, которые будут открываться в новой вкладке WordPress. В классическом редакторе просто вставьте ссылку и нажмите «Параметры ссылки», чтобы открыть всплывающее окно расширенной вставки ссылки. Затем установите флажок «Открыть ссылку в новой вкладке».

В редакторе Гутенберга процесс почти идентичен. Вы просто нажимаете «Настройки ссылки» и включаете ползунок «Открыть в новой вкладке».

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

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

Получение ссылок для автоматического открытия в новой вкладке (для WordPress)

Вы можете добавить фрагмент кода в файл footer.php вашей темы, чтобы автоматически открывать внешние ссылки на вашем сайте в новом окне. Просто перейдите в Внешний вид > Редактор на панели инструментов WordPress. Затем щелкните файл footer.php, чтобы открыть его. Прокрутите вниз, пока не увидите закрывающие теги body и HTML.

Скопируйте и вставьте следующий код перед закрывающими тегами body и HTML.

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

Плагины WordPress для автоматического открытия внешних ссылок в новом окне

Плагины – это самый быстрый и гибкий вариант настройки ссылок для открытия в новой вкладке или окне. Давайте рассмотрим два варианта ниже.

Внешние ссылки в новом окне / новой вкладке

Внешние ссылки в новом окне / новой вкладке от WebFactory Ltd – это бесплатный плагин WordPress, который автоматически устанавливает все внешние ссылки для открытия в новом окне. Он начинает работать, как только вы его установите и активируете.

Есть страница настроек для включения или выключения функций для определенных ссылок, если вы хотите большего контроля.

Внешние ссылки – nofollow, noopener и новое окно

Для большего контроля над настройками ссылок вы можете использовать внешние ссылки – nofollow, noopener и новое окно. Это еще один бесплатный плагин от WebFactory Ltd.

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

Вы также можете автоматически установить для всех внешних ссылок на вашем сайте значение «nofollow». Этот тег указывает поисковым системам не переходить по этим ссылкам и не связывать их с рейтингом вашего сайта. Это рекомендуется для новых сайтов, которые могут не получать много входящих ссылок. Почему? Потому что сайты, на которые ссылаются чаще, чем на них, смотрятся поисковыми системами менее благосклонно.

Перемещение окна

В JavaScript имеются следующие методы объекта для перемещения окна:

– абсолютное перемещение окна в указанные координаты экрана;
– перемещения окна на указанное количество пикселей относительно его текущего положения.

Синтаксис метода «»:

window.moveTo(x, y);

// x и у – это координаты точки (соответственно горизонтальная и вертикальная), в которую необходимо переместить левый верхний угол окна браузера

Пример, в котором переместим окно в точку (50, 75):

window.moveTo(50, 75);

Пример, в котором произведём перемещение окна в левый верхний угол экрана:

window.moveTo(0, 0);

Синтаксис метода «»:

window.moveBy(deltaX, deltaY);

// deltaX и deltaY – количество пикселей, на которое следует переместить окно соответственно по горизонтали и вертикали относительно его текущего положения

Например, сдвинем окно на 75px вправо и на 100px вниз:

window.moveBy(75, 100);

В большинстве браузеров перемещение окна доступно только при выполнении следующих условий:

окно (или вкладка) должно быть создано с помощью ;
в окне не должно находиться более чем одной вкладки.

Пример:

<script>
var myWindow;
function openWindow() {
  myWindow = window.open('', '', 'width=200,height=200');
}
function moveWindowTo() {
  if (myWindow && !myWindow.closed) {
    myWindow.moveTo(300,300);
    myWindow.focus();
  }
}
function moveWindowBy(x,y) {
  if (myWindow && !myWindow.closed) {
    myWindow.moveBy(x,y);
    myWindow.focus();
  }
}
</script>
...
<button onclick="openWindow()">Открыть окно</button>
<button onclick="moveWindowTo()">Переместить левый угол окна в точку (300,300)</button>
<button onclick="moveWindowBy(50,50)">Переместить окно относительно его текущего положения на 50px вправо и на 50px вниз</button>
<button onclick="moveWindowBy(-50,0)">Переместить окно относительно его текущего положения на 50px влево</button>
<button onclick="moveWindowBy(50,0)">Переместить окно относительно его текущего положения на 50px вправо</button>
<button onclick="moveWindowBy(0,-50)">Переместить окно относительно его текущего положения на 50px вверх</button>
<button onclick="moveWindowBy(0,50)">Переместить окно относительно его текущего положения на 50px вниз</button>

Работа с выборкой

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

Проверка выборки

Мы можем определить, соответствует ли выборка определённому критерию, с помощью метода .is(). Этот метод наиболее часто используется, чтобы предоставить селектор в качестве единственного аргумента. Он возвращает true или false в зависимости от того, соответствует ли выборка селектору:

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

Получение, установка и неявный перебор

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

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

Предположим, что вы хотите изменить HTML у всех пунктов списка на странице. Чтобы сделать это мы должны использовать метод .html(), который изменит HTML у всех выбранных пунктов списка.

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

Явный перебор

Иногда задача, которую вы пытаетесь решить, не вписываются ни в один из существующих методов jQuery и тогда вы должны сделать явный перебор выборки с помощью метода .each(). В следующем коде в начало пункта списка мы добавляем тег <b> содержащий индекс элемента списка.

Заметьте, что внутри функции, которую мы передаём в .each(), у нас есть два способа доступа к текущему исходному элементу DOM: через this и через elem. Как обсуждалось в разделе «Основы JavaScript», this — специальное ключевое слово в JavaScript, указатель на объект, который является текущим контекстом функции. В jQuery this почти всегда относится к исходному элементу DOM, с которым функция в данный момент работает. Так, в случае .each(), this относится к текущему элементу в наборе элементов которые мы перебираем.

Цепочки

Одной из самых выгодных частей jQuery является способность «сцеплять» методы вместе. Это означает, что мы можем вызвать набор методов для выборки без её повторения или сохранения выборки в переменной. Мы даже можем сделать новые выборки на основе предыдущих и всё без разрыва цепочки.

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

Тем не менее, она должна применяться с осторожностью. Большие цепочки могут сделать код чрезвычайно трудным для чтения, изменения и отладки

Нет жёстких правил, насколько длинной должна быть цепочка, но даже для простой цепочки выше, вероятно, следует провести рефакторинг для удобства чтения.

screenX и screenY (screenLeft и screenTop)

«» и «» предназначены для получения положения окна браузера (т.е. его x и y координат) относительно экрана.

const screenX = window.screenX;
const screenY = window.screenY;

В Internet Explorer 8 и более ранних версиях, объект не содержит свойств и . В них это выполняется через «» и «». В то же время Mozilla Firefox (до версии 64) поддерживает только «» и «». Остальные браузеры поддерживает как один, так и другой вариант свойств.

Кроссбраузерное решение:

const screenX = window.screenX ? window.screenX : window.screenLeft;
const screenY = window.screenY ? window.screenY : window.screenTop;

Например, выведем координаты окна браузера относительно экрана при клике на ссылку:

// ...
// получим ссылку
const $getScreenXY = document.querySelector('#getScreenXY');
// при клике на ссылку
$getScreenXY.onclick = function (e) {
  e.preventDefault();
  showLog({
    screenX: screenX,
    screenY: screenY
  });
};

События мыши

Метод	Описание
.click()	Привязывает JavaScript обработчик событий «click» (клик левой кнопкой мыши), или запускает это событие на выбранный элемент.
.contextmenu()	Привязывает JavaScript обработчик событий «contextmenu» (вызов контекстного меню на элементе — клик правой кнопкой мыши), или запускает это событие на выбранный элемент.
.dblclick()	Привязывает JavaScript обработчик событий «dblclick» (двойной клик левой кнопкой мыши), или запускает это событие на выбранный элемент.
.hover()	Связывает один или два обработчика событий для элемента, которые будут выполнены, когда указатель мыши находится на элементе и при его отведении.
.mousedown()	Привязывает JavaScript обработчик событий «mousedown» (нажатие кнопки мыши на элементе), или запускает это событие на выбранный элемент.
.mouseenter()	Привязывает JavaScript обработчик событий «mouseenter» (срабатывает, когда указатель мыши заходит на элемент), или запускает это событие на выбранный элемент.
.mouseleave()	Привязывает JavaScript обработчик событий «mouseleave» (срабатывает, когда указатель мыши выходит из элемента), или запускает это событие на выбранный элемент.
.mousemove()	Привязывает JavaScript обработчик событий «mousemove» (срабатывает, когда указатель мыши перемещается внутри элемента), или запускает это событие на выбранный элемент.
.mouseout()	Привязывает JavaScript обработчик событий «mouseout» (срабатывает, когда указатель мыши покидает элемент), или запускает это событие на выбранный элемент.
.mouseover()	Привязывает JavaScript обработчик событий «mouseover» (срабатывает, когда указатель мыши входит в элемент), или запускает это событие на выбранный элемент.
.mouseup()	Привязывает JavaScript обработчик событий «mouseup» (срабатывает, когда указатель мыши находится над элементом и кнопка мыши отпущена), или запускает это событие на выбранный элемент.

Обработка событий с помощью методов jQuery

Перед тем как переходить к добавлению элементам обработчиков событий, эти элементы сначала необходимо получить. Узнать о том, как найти нужные элементы на странице можно в статье jQuery — Выбор элементов.

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

// функция on
.on(events,handler);
// функция one
.one(events,handler);

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

// краткая запись функции on
.event(handler);

// event - название события (можно использовать для обработки только тех событий, для которых в jQuery создана такая краткая запись)

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

Например, добавим с помощью функции событие для всех элементов с классом :

// использование в качестве обработчика анонимной функции
$('.btn').on('click', function() {
  // действия, которые будут выполнены при наступлении события...
  console.log($(this).text());
});

// использование обычной функции в качестве обработчика
var myFunction = function() {
  console.log($(this).text());
}
$('.btn').on('click', myFunction);

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

$('.btn').click(function() {
  // действия, которые будут выполнены при наступлении события...
  console.log($(this).text());
});

Дополнительная информация о событии

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

$('#demo').on('click', function(e){
  // e – объект Event, содержащий дополнительную информацию о произошедшем событии
  // часто используемые свойства объекта Event
  e.preventDefault(); //отменить выполнение действия по умолчанию
  e.stopPropagation(); //остановить дальнейшее всплытие события
  // e.type – получить тип события
  // e.target – ссылка на элемент, на котором произошло событие
  // e.currentTarget - ссылка на текущий элемент (для которого сработал обработчик). Это свойство, как правило, равно функции this.
  // e.currentTarget === this
  // e.which – код клавиши (для мыши), код кнопки или символа (для клавиатуры)
  //e.pageX, e.pageY – координаты курсора, относительно левого верхнего угла документа
});

Пространство имён

В jQuery после указания имени события вы можете ещё дополнительно указать пространство имён.

Например:

// событие click в пространстве имён first
$('#demo').on('click.first',function(){
  console.log('1 обработчик события click');
});
// событие click в пространстве имён second
$('#demo').on('click.second',function(){
  console.log('2 обработчик события click');
});

Пространство имён — это очень удобная вещь. Она используется, например, когда вам необходимо вызвать не все события, а только с определённым именем.

// вызвать событие click в пространстве имён first
$('#demo').trigger('click.first');

// вызвать событие click в пространстве имён second
$('#demo').trigger('click.second');

Также с его помощью очень просто удалять определённые события:

//удалить обработчики события click в пространстве имён first
$('#demo').off('click.first');

//удалить обработчики события click в пространстве имён second
$('#demo').off('click.second');

Описание и примеры использования функций и рассматриваются в статье немного ниже.

Передача дополнительных данных в обработчик

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

Осуществляется это так (пример):

<div id="content"></div>
<button id="showContent1">Показать контент 1</button>
<button id="showContent2">Показать контент 2</button>
...

<script>
$('#showContent1').on('click', {title:'Заголовок 1', content: 'Содержимое 1...'}, function(e){
  var output = '<b>'+e.data.title+': </b>' + e.data.content;
  $('#content').html(output);
});
$('#showContent2').on('click', {title:'Заголовок 2', content: 'Содержимое 2...'}, function(e){
  var output = '<b>'+e.data.title+': </b>' + e.data.content;
  $('#content').html(output);
});
</script>