###
  • Программы
  • Безопасность
  • Новости
  • Интересное
  • Советы 
  • Новости 
  • Обзоры 

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

    07.09.2020 Новости

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

    Элемент в фокусе

    Когда элемент формы оказывается в фокусе, возникает событие focus , а когда элемент выходит из фокуса, срабатывает событие blur . Создадим поле для ввода и выведем в консоль текст при получении им фокуса и при выходе из фокуса:

    HTML код:

    Нет смысла в использовании этих событий для изменения стиля элемента. Для этого в CSS существует псевдокласс focus.

    Ввод значения

    Событие input возникает, когда пользователь печатает текст в поле для ввода. Оно срабатывает при добавлении или удалении каждого символа, а также при копировании текста в поле для ввода. В некоторых браузерах оно работает необычно: при каждом вводе символа создаётся событие blur , после этого выполняется обработчик события input , а потом создаётся событие focus . Если обработчиков событий focus и blur нет, то в этом нет проблемы. Но если они есть, то они будут срабатывать при каждом добавлении символа.

    Добавим на страницу ещё один тэг и выведем его значение при вводе текста:

    HTML код:

    JavaScript:

    28
    29
    30
    31
    32

    		 var newv = document.getElementById("new_value"); newv.onchange = function () { console.log("Значение изменено на: "+newv.value); };
    Отправка формы

    Событие submit срабатывает при отправке формы на сервер. Оно используется для проверки данных, которые пользователь ввёл в форму. В обработчике проверяются значения элементов формы, и если какие-то значения введены неправильно, то делается отмена отправки формы. При этом обычно выводится сообщение, в котором указывается, что нужно исправить.

    Поместим созданные тэги в форму и добавим кнопку отправки формы:

    HTML код:

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

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

    The input event fires when the value of an , , or element has been changed.

    Bubbles Cancelable Interface Event handler property
    Yes
    No
    InputEvent
    GlobalEventHandlers.oninput
    HTML JavaScript const input = document.querySelector("input"); const log = document.getElementById("values"); input.addEventListener("input", updateValue); function updateValue(e) { log.textContent = e.target.value; } Result Specifications Specification Status
    HTML Living Standard
    		 Living Standard
    Document Object Model (DOM) Level 3 Events Specification
    The definition of "input event" in that specification.     		Obsolete
    Browser compatibility

    The compatibility table in this page is generated from structured data. If you"d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

    Update compatibility data on GitHub

    Desktop Mobile Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet input event
    Chrome Full support Yes Edge Full support 79 Full support 79 No support 12 - 79

    Notes

    Notes Not supported on select , checkbox , or radio inputs.     		Firefox Full support Yes IE Partial support 9

    В этой статье, рассмотрим методы, которые библиотека jQuery предоставляет веб-разработчику для обработки событий.

    Для работы с событиями в сценариях JavaScript браузер предоставляет API (например, функцию addEventListener). Используя эту функцию, вы можете указать код, который необходимо выполнить, когда браузер для указанного элемента будет генерировать указанное событие.

    Обработка событий с помощью методов jQuery Синтаксис функции on

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

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

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

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

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

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

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

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

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

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

    $("#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");

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

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

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

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

    Показать контент 1 Показать контент 2 ... $("#showContent1").on("click", {title:"Заголовок 1", content: "Содержимое 1..."}, function(e){ var output = ""+e.data.title+": " + e.data.content; $("#content").html(output); }); $("#showContent2").on("click", {title:"Заголовок 2", content: "Содержимое 2..."}, function(e){ var output = ""+e.data.title+": " + e.data.content; $("#content").html(output); });

    Как повесить несколько событий на один элемент

    Пример использования одного обработчика для нескольких (2 или более) событий:

    $("#id").on("keyup keypress blur change", function(e) { console.log(e.type); // тип события }); // или так var myFunction = function() { ... } $("#id") .keyup(myFunction) .keypress(myFunction) .blur(myFunction) .change(myFunction);

    Для каждого события своя функция:

    $("#id").on({ mouseenter: function() { // обработчик события mouseenter... }, mouseleave: function() { // обработчик события mouseleave... }, click: function() { // обработчик события click... } });

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

    $("#demo").click(function(){ console.log("1 обработчик события click"); }); $("#demo").click(function(){ console.log("2 обработчик события click"); });

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

    Var eventList = $._data($("#demo"), "events"); console.log(eventList);

    Программный вызов события

    Для вызова события из кода в jQuery есть 2 метода:

    • trigger - вызывает указанное событие у элемента.
    • triggerHandler - вызывает обработчик события, при этом само событие не происходит.
    $("#header").on("click", function() { console("Произошёл клик на элементе #header"); } }); // программный вызов события click элемента $("#header").trigger("click"); // короткая запись данного вызова $("#header").click(); // вызов обработчика события click у выбранного элемента $("#header").triggerHandler("click"); jQuery - Событие загрузки страницы (ready)

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

    Самая короткая запись события загрузки страницы в jQuery выглядит так:

    $(function(){ // действия, которые необходимо выполнить после загрузки документа... });

    Но, можно использовать и более длинную запись:

    $(document).ready(function(){ // действия, которые необходимо выполнить после загрузки документа... });

    jQuery - Событие загрузки (load)

    Событие load браузер генерирует элементу, когда он и все вложенные в него элементы были полностью загружены. Данное событие предназначено только для элементов, в которых присутствует URL: image , script , iframe и window .

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

    $(window).on("load", function() { // действия после полной загрузки страницы... });

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

    ... $("#image").on("load", function() { console.log("Изображение загружено"); });

    jQuery - События мыши

    В jQuery для отслеживания действий мыши наиболее часто используют следующие события:

    • mousedown
    • mouseup
    • click
    • mousemove
    • wheel
    • hover
    • mouseenter
    • mouseover
    • mouseleave
    • mouseout
    jQuery - Событие клик (click)

    Событие click является сложным событием, оно возникает после генерирования событий mousedown и mouseup . Событие mousedown возникает, когда указатель находится над элементом и кнопка мыши нажата. Событие mouseup происходит, когда указатель находится над элементом и кнопка мыши отпущена. Событие click генерируется, когда курсор находится над элементом, и клавиша мыши нажата и отпущена. Эти события могут получать любые HTML элементы.

    Например, повесим обработчик на событие onclick элемента window . При наступлении данного события обработчик будет выводить номер нажатой клавиши и координаты курсора:

    $(window).on("click", function(e) { // обработка события click... console.log("Нажата кнопка: " + e.which); //1 - левая кнопка, 2 - средняя кнопка, 3 - правая console.log("Координаты курсора: x = " + e.pageX + " ; y = " + e.pageY); });

    Например, повесим событие onclick на все элементы с классом btn:

    $(".btn").on("click", function(){ // код обработчика события нажатия кнопки... }); Краткая запись события по клику: $(".btn").click(function(){ ... });

    Например, разберем, как можно скрыть блок через некоторое время после события click:

    ...Скрыть блок через 5 секунд... ... $(".hide-message").click(function(e){ e.preventDefault(); var _this = this; setTimeout(function(){ $(_this).closest(".message").hide(); }, 5000); });

    jQuery - Событие при наведении (hover)
    jQuery - Что собой представляет событие hover

    Событие при поднесении курсора является сложным и состоит из 2 событий:

    • вхождения (mouseenter, mouseover);
    • покидания (mouseleave, mouseout).

    События mouseenter и mouseleave в jQuery отличаются от mouseover и mouseout только тем, что они не возникают когда курсор соответственно входит и покидает внутренние элементы прослушиваемого элемента. Другими словами события mouseover и mouseout всплывают, а mouseenter и mouseleave – нет.

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

    • Ручка
    • Карандаш
    • Линейка
    ... $("ul>li"). mouseenter(function(){ // при вхождении в элемент $(this).css("color","orange"); }). mouseleave(function(){ // при покидании элемента $(this).css("color","black"); });

    Те же самые действия, но использованиям mouseover и mouseout:

    $("ul>li"). mouseover(function(){ // при вхождении в элемент $(this).css("color","orange"); }). mouseout(function(){ // при покидании элемента $(this).css("color","black"); });

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

    Например, подсчитаем количество посещений элемента при наступлении события "Навести мышью":

    Количество: 0 ... $("#count").mouseenter(function(){ var count = parseInt($(this).find("span").text()); count++; $(this).find("span").text(count); });

    Вместо использования mouseenter и mouseleave можно использовать событие hover .

    Например, перепишем вышеприведённый пример, используя hover:

    $("ul>li").hover(function(){ // при вхождении в элемент $(this).css("color","orange"); }, function(){ // при покидании элемента $(this).css("color","black"); });

    При использовании события hover в jQuery, первый обработчик используется для задания действий при вхождении курсора в элемент (mouseenter), а второй - при покидании (mouseleave).

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

    Например:

    $("h1").hover(function(){ console.log("Произошло события входа в элемент или выхода из него"); });

    jQuery - Событие движения мыши

    Событие mousemove посылается элементу, когда указатель мыши перемещается внутри него. Любой HTML элемент может получать это событие.

    $(".target").mousemove(function(e) { console.log("Вызван обработчик для события mousemove."); console.log("Координаты относительно левого верхнего угла документа: " + e.pageX + ", " + e.pageY); console.log("Координаты курсора внутри цели: " + e.offsetX + ", " + e.offsetY); });

    jQuery - Событие колёсика мыши (wheel)

    Прослушивание события прокрутки колёсика (wheel) мышки можно осуществить так:

    $(window).on("wheel", function(e) { // код обработчика (например)... console.log("Количество прокрученных пикселей: " + e.originalEvent.deltaY); if (e.originalEvent.deltaY < 0){ console.log("Прокручиваем вверх"); } else { console.log("Прокручиваем вниз"); } });

    Данное событие в отличие от scroll генерируется браузером только для колёсика мышки, при этом неважно прокручивается элемент или нет, т.е. с ним можно работать на элементах с overflow , равным hidden . Еще одно отличие заключается в том, что wheel генерируется до прокрутки, а scroll - после неё.

    jQuery – События клавиатуры

    При нажатии клавиши клавиатуры браузер генерирует события в следующем порядке:

    Keydown -> keypress -> keyup

    • keydown (клавиша нажата, но ещё не отпущена);
    • keypress (событие генерируется для букв, цифр и других клавиш, за исключением управляющих) – предназначено для того чтобы получить код символа (события keydown и keyup позволяют узнать только о коде клавиши, но не символа);
    • keyup (генерируется браузером при отпускании клавиши).

    Например, напишем обработчик для прослушивания всех событий, которые происходят при нажатии клавиши:

    ... $("#target").on("keydown keypress keyup", function(e) { console.log("Тип события: " + e.type); // keydown, keypress, keyup console.log("Код нажатой клавиши или символа: " + e.which); // код символа позволяет получить только keypress console.log("Нажата клавиша Alt: " + e.altKey); console.log("Нажата клавиша Ctrl: " + e.ctrlKey); console.log("Нажата клавиша Shift: " + e.shiftKey); console.log("Нажата клавиша Cmd (osMac): " + e.metaKey); });

    Пример, в котором показано, как можно прослушать событие keypress и узнать, нажато ли указанное сочетание клавиш:

    $(document).keypress("c", function(e) { if(e.ctrlKey) { console.log("Нажато сочетание клавиш Ctrl+c"); } });

    Пример, как можно прослушать сочетание клавиш Ctrl+Enter:

    $(document).keydown(function(e) { // с поддержкой macOS X if ((e.ctrlKey || e.metaKey) && (e.keyCode == 13 || e.keyCode == 10)) { // ваши действия... } }

    Пример, с использованием событий keydown и keyup:

    ... $("#name"). keydown(function(){ $(this).css("background-color", "yellow"); }). keyup(function(){ $(this).css("background-color, "pink"); });

    jQuery – События элементов формы

    В jQuery можно выделить следующие события для элементов формы и не только:

    • focus (focusin)
    • blur (focusout)
    • change
    • input (для текстовых элементов формы)
    • select
    • submit
    jQuery - События получения и потери фокуса

    Событие focus посылается элементу, когда он получает фокус. Данное событие генерируется для элементов input , select и ссылок (a href="..."), а также любых других элементов, у которых установлено свойство tabindex . Получение элементом фокуса обычно осуществляется посредством клика или нажатия клавиши Tab на клавиатуре. Событие focus не всплывает.

    Кроме focus есть ещё похожее событие, называется оно focusin . В отличие от focus данное событие всплывает, и оно может, например, использоваться для обнаружения события фокуса родительскими элементами.

    Событие blur посылается элементу, когда он теряет фокус. Так же как и focus , событие blur имеет похожее событие focusout . Данное событие отличается от blur тем, что оно может всплывать. Это возможность можно использовать, например, для получения его на родительских элементах, а не только на том элементе, который его вызвал (target).

    Например, при получении элементом div события фокуса установим ему фон оранжевого цвета:

    ... $("#demo"). focusin(function(){ $(this).css("background-color","orange"); }) .focusout(function(){ $(this).css("background-color","inherit"); });

    Точно такое же выполнить с помощью событий focus и blur не получится, т.к. они не всплывают:

    $("#demo input"). focus(function(){ $(this).parent().css("background-color","orange"); }) .blur(function(){ $(this).parent().css("background-color","inherit"); });

    jQuery - Событие изменения (change)

    Событие change предназначено для регистрации изменения значения элементов input , textarea и select . Для элементов select , checkboxes , и radio кнопок данное событие возникает сразу (т.е. как только пользователь делает какой-то выбор). Но для других элементов данное событие не будет происходить до тех пор, пока этот элемент не потеряет фокус.

    Пример использования события change для слежения за состоянием элемента checkbox . Доступность кнопки будет определять в зависимости от того в каком состоянии (checked или нет) находиться флажок:

    Отправить ... $(function() { $("#agree").on("change", function(){ if (this.checked) { $("#send").prop("disabled",false); } else { $("#send").prop("disabled",true); } }); });

    Пример, в котором рассмотрим, как получить значение элемента select при его изменении:

    Первое значение Второе значение Третье значение ... $(function() { $("#list").on("change", function(){ var value = $(this).val(); $("#result").text(value); }); });

    Пример, в котором рассмотрим, как получить все выбранные элементы select при его изменении:

    Зелёный Красный Синий Коричневый Фиолетовый Серый ... $("select") .change(function () { var colors = ; $("select option:selected").each(function() { colors.push($(this).text()); }); console.log("Выбранные цвета: " + colors.join()); }) .change();

    Пример программного вызова события change для элемента select:

    // list - id элемента change $("#list").trigger("change"); // краткая запись $("#list").change(); // вызов только обработчика события change $("#list").triggerHandler("change");

    Пример использования события изменения change для получения значения элемента input:

    ... $(function() { // событие изменения значения input (возникает только после потери фокуса) $("input").on("change", function(){ var value = $(this).val(); console.log(value); }); });

    Но кроме события change есть ещё событие input для текстовых элементов. Данное событие в отличие от change генерируется сразу, а не после того как данный элемент потеряет фокус.

    Пример, использования события ввода для получения значения элемента input:

    $("input").on("input",function(){ var value = $(this).val(); console.log(value); });

    Пример, в котором представлен один из способов получения значения элемента textarea:

    ... $("textarea").on("input",function(){ var value = $(this).val(); console.log(value); });

    Пример, в котором рассмотрим, как с помощью события change получить значение выбранного элемента input с type , равным radio:

    Windows Linux macOS ... $(function() { $("input").on("change", function(){ var value = $(this).val(); console.log(value); }); });

    jQuery - Событие выбора (select)

    Событие выбора select генерируется браузером, когда пользователь внутри элементов input с type="text" или textarea выделяет текст.

    $("#target").select(function() { console.log("Вызван обработчик события select"); });

    jQuery – Событие отправки формы (submit)

    Событие submit возникает у элемента, когда пользователь пытается отправить форму. Данное событие может быть добавлено только к элементам form .

    Пример, использования события submit:

    ... ... $("#feedback").submit(function(e) { // отменить отправку формы e.preventDefault(); // другие действия, например, для отправки формы по ajax... });

    Программный вызов отправки формы:

    $("#feedback").submit(); $("#feedback").trigger("submit");

    jQuery - Событие прокрутки (scroll)

    Для отслеживания состояния скроллинга в jQuery используется событие scroll .

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

    // краткая запись функции $(window).scroll(function() { // действия при скроллинге страницы... if ($(this).scrollTop()>200) { $(".scrollup").fadeIn(); } else { $(".scrollup").fadeOut(); } });

    jQuery - Событие изменения размеров окна (resize)

    Для прослушивания события изменения окна браузера используется resize:

    Например, создадим обработчик, который будет при изменении окна браузера выводить в конец страницы её ширину и высоту:

    $(window).resize(function() { $("body").append("

    Ширина x Высота = " + window.innerWidth + " x " + window.innerHeight + "

    "); });

    jQuery - Отмена стандартного поведения события

    Некоторые элементы в HTML имеют стандартное поведение. Например, когда пользователь нажимает на ссылку, он переходит по адресу указанному в атрибуте href . Если вам это действие не нужно, то его можно отменить. Для отмены стандартного поведения необходимо вызвать в обработчике этого события метод preventDefault объекта event .

    Например, отменим стандартное поведение всех ссылок на странице, имеющих класс service:

    $("a.service").on("click",function(e){ //отменяем стандартное действие браузера e.preventDefault(); // действия, которые будет выполнять ссылка... });

    Что такое всплытие и как его остановить

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

    Текущий элемент (цель) -> родительский элемент цели -> прародительский элемент -> ... -> document -> window

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

    Например, необходимо чтобы при поднесении курсора к элементу с классом mark , его содержимое становилось оранжевым цветом.

    Некоторый текст...фрагмент......продолжение... ... $(".mark").on("hover", function(e){ e.stopPropagation(); $(this).css("color",orange); }, function(e){ e.stopPropagation(); $(this).css("color",black); } });

    В данном случае если не указывать метод stopPropagation , то при поднесении курсора к элементу span с классом mark данное событие возникнет не только у него, но и у всех его родительских элементов. А это в этом примере приведёт к тому, что изменится цвет не только текста, заключенного в span , но и всего абзаца.

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

    $("a").on("click", function(e){ //e.preventDefault(); //e.stopPropagation(); ... return false; });

    Добавление событий к динамически созданным объектам

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

    $(document).on(eventName, selector, handler); // document или любой другой существующий родительский элемент // eventName - имя события // selector - селектор, осуществляющий фильтрацию потомков, для которых необходимо запустить обработчик события // handler - обработчик события

    Это действие можно осуществить благодаря тому, что событие всплывает, и, следовательно, возникает у всех предков этого элемента. А объект, до которого всплывают все события на странице, является document . Поэтому в большинстве случаев выбирают именно его. После этого зная селектор, функция on может программно отобрать среди элементов (элемента, который вызвал это событие (target) и всех его предков включая родителя) те, которые соответствуют ему. И затем для всех отобранных элементов выполнить указанный в функции on обработчик. Действия, посредством которых обработка события переносится на другой элемент (предок), называется в jQuery ещё процессом делегирования события .

    Например, добавим событие к элементу, которого ещё нет на странице:

    Добавить кнопку // при нажатии на элемент с id="addButton" добавить в начало страницы новую кнопку $("#addButton").on("click", function(e) { $("body").prepend("Удалить меня"); }); // добавить событие click, которое будет выполнено для элементов, которых ещё нет на странице $(document).on("click",".deleteMe", function() { $(this).remove(); });

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

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

    $(document).on("click","#comment a",function(e) { if(!(location.hostname === this.hostname || !this.hostname.length)) { e.preventDefault(); location.href="away?link="+encodeURIComponent($(this).attr("href")); } });

    jQuery - Удалить обработчик события

    Удаление обработчиков события осуществляется с помощью метода off . При этом с помощью него можно удалить только те обработчики, которые добавлены посредством метода on .

    Вызов метода off без аргументов снимет у указанных элементов все добавленные к ним обработчики событий.

    Например, отключим все обработчики у элементов с классом link:

    $(".link").off();

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

    $(".link").off("link");

    Специальный селектор (**) позволяет удалить только делегированные события с сохранением не делегированных:

    $(".link").off("click","**");

    Удалить только указанные делегированные события (с помощью селектора):

    // добавление делегированного события $("ul").on("click","li", function(){ // выводим в консоль контент элемента li console.log($(this).text()); }); // удаление делегированного события $("ul").off("click","li");

    Удалить все обработчики openModal делегированного события click в пространстве имён modal для элементов с классом show:

    $("body").on("click.modal", ".show", openModal);

    Создание пользовательского события

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

    Принцип создания специального события jQuery рассмотрим посредством следующего примера:

    Вызвать пользовательское событие highlight (цвет зелёный) Вызвать пользовательское событие highlight (цвет красный) ... // добавляем ко всем элементам p пользовательское событие, которое будет изменять цвет текста и его содержимое // получения данных, переданных методом trigger, осуществим посредством аргументов color и title $(".module p").on("highlight", function(e, color, title) { $(this).css("color",color); $(this).text("Вызвано пользовательское событие highlight " +title); }); // при нажатии на элемент с классом success вызвать кастомное событие highlight и передать ему параметры $(".success").click(function(){ // используя второй аргумент передадим данные в обработчик события $(this).closest(".module").find("p").trigger("highlight",["green","(цвет зелёный)"]); }); // при нажатии на элемент с классом error вызвать кастомное событие highlight и передать ему параметры $(".error").click(function(){ // используя второй аргумент передадим данные в обработчик события $(this).closest(".module").find("p").trigger("highlight",["red","(цвет красный)"]); });