Въведете тип текст на събитието. Форма събития. Предаване на допълнителни данни към манипулатора

Входното събитие се задейства, когато стойността на елемент , , или е променена.

Таблицата за съвместимост в тази страница е генерирана от структурирани данни. Ако искате да допринесете за данните, моля, разгледайте https://github.com/mdn/browser-compat-data и ни изпратете заявка за изтегляне.

Актуализирайте данните за съвместимост в GitHub

Предишната тема разгледа събития, които възникват при натискане на клавиши. В тази тема ще разгледаме други събития от формата. Включително изпращане на формуляра до сървъра.

Когато елемент на формуляр има фокус, се задейства събитието за фокус, а когато елементът излезе извън фокус, се задейства събитието за размазване. Нека създадем поле за въвеждане и изходен текст към конзолата, когато получи фокус и когато загуби фокус:

HTML код:

Няма смисъл да използвате тези събития за промяна на стила на даден елемент. За тази цел в CSS има псевдоклас, наречен focus.

Събитието за въвеждане възниква, когато потребителят въвежда текст в поле за въвеждане. Задейства се при добавяне или премахване на всеки символ, както и при копиране на текст в полето за въвеждане. В някои браузъри работи необичайно: всеки път, когато се въведе знак, се предизвиква събитие за размазване, след това се изпълнява манипулаторът на събитие за въвеждане и след това се повдига събитието за фокусиране. Ако няма манипулатори на събития за фокусиране и замъгляване, тогава няма проблем. Но ако са, тогава те ще се задействат всеки път, когато се добави символ.

Нека добавим още един таг към страницата и да покажем стойността му при въвеждане на текст:

HTML код:

JavaScript:

Събитието за изпращане се задейства, когато формулярът се изпрати на сървъра. Използва се за валидиране на данните, които потребителят е въвел във формата. Манипулаторът проверява стойностите на елементите на формуляра и ако някои стойности са въведени неправилно, формулярът се анулира. Това обикновено показва съобщение, което показва какво трябва да се коригира.

Нека поставим създадените тагове във формуляра и добавим бутон за изпращане на формуляра:

HTML код:

В предишните примери елементите на формуляра вече са намерени, така че манипулаторът не търси отново.

Ако формулярът е попълнен правилно, т.е. всички полета имат поне два знака, тогава браузърът ще се опита да стартира файла, посочен в атрибута за действие, и ще възникне грешка, защото няма такъв файл. Но в това няма риск, така че няма нужда да се страхувате да тествате скрипта. Ако в едно от полетата са въведени по-малко от два знака, ще се появи съобщение и изпращането ще бъде отменено. Ако има много проверки, тогава можете да показвате различно съобщение за всяка проверка и да отмените изпращането на формуляра.

В тази статия ще разгледаме методите, които библиотеката jQuery предоставя на уеб разработчика за обработка на събития.

За работа със събития в скриптове JavaScript браузърпредоставя API (например функцията addEventListener). С помощта на тази функция можете да посочите код, който да се изпълни, когато браузърът за определен елемент генерира определено събитие.

Преди да можете да добавите манипулатори на събития към елементи, първо трябва да получите тези елементи. Можете да научите как да намерите необходимите елементи на страница в статията jQuery - Избор на елементи.

В jQuery можете да прикачите събитие (слушател на събитие) към конкретен елемент, като използвате функциите on и one, както и съкратени записи.

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

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

Например, използвайте функцията on, за да добавите събитие за кликване за всички елементи с класа btn:

// използва анонимна функция като манипулатор $(".btn").on("click", function() ( // действия, които ще бъдат извършени, когато настъпи събитието... console.log($(this). текст( )); )); // използваме обикновена функция като манипулатор 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 – връзка към текущия елемент (за който манипулаторът е задействан). Това свойство обикновено е равно на тази функция. // e.currentTarget === това // e.which – код на клавиш (за мишка), бутон или код на символ (за клавиатура) //e.pageX, e.pageY – координати на курсора спрямо ляво горен ъгълдокумент));

В jQuery, след като посочите името на събитието, можете допълнително да посочите пространство от имена.

Например:

// първо събитие за кликване в пространството от имена $("#demo").on("click.first",function())( console.log("1 манипулатор на събитие за кликване"); )); // събитие за щракване във второто пространство от имена $("#demo").on("click.second",function())( console.log("2 манипулатор на събитие за щракване"); ));

Пространствата от имена са много удобно нещо. Използва се например, когато трябва да задействате не всички събития, а само тези с определено име.

// задейства събитието клик в първото пространство от имена $("#demo").trigger("click.first"); // задейства събитието кликване във второто пространство от имена $("#demo").trigger("click.second");

Той също така прави много лесно изтриването на определени събития:

//премахване на манипулатори на събития за щракване в първото пространство от имена $("#demo").off("click.first"); //премахване на манипулатори на събития при кликване във второто пространство от имена $("#demo").off("click.second");

Описанията и примерите за използване на функциите за задействане и изключване са обсъдени в статията малко по-долу.

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

Това се прави по следния начин (пример):

Показване на съдържание 1 Показване на съдържание 2 ... $("#showContent1").on("click", (title:"Title 1", content: "Content 1..."), function(e)( var output = ""+e.data.title+": " + e.data.content; $("#content").html(изход); )); $("#showContent2").on("click", (title:"Title 2", content: "Content 2..."), function(e)( var output = ""+e.data.title+" : " + e.data.content; $("#content").html(изход); ));

Пример за използване на един манипулатор за няколко (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() ( / / манипулатор на събитие за щракване... ) ));

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

$("#demo").click(function())( console.log("1 манипулатор на събитие за кликване"); )); $("#demo").click(function())( console.log("2 click манипулатор на събития"); ));

Например, можете да разберете в какъв ред ще се изпълняват събития по следния начин:

Var eventList = $._data($("#demo"), "събития"); console.log(eventList);

Има 2 метода за извикване на събитие от код в jQuery:

• тригер - задейства определеното събитие на елемент.
• triggerHandler - извиква манипулатор на събитие, но самото събитие не се случва.

Процесът на добавяне на манипулатор на събитие към елемент обикновено се извършва след зареждане на страницата, т.е. когато DOM дървото на документа вече е изградено. В противен случай, когато пишете манипулатори, можете да получите достъп до елементи, които все още не са на страницата.

Най-краткият запис за събитие за зареждане на страница в jQuery изглежда така:

$(function())( // действия, които трябва да бъдат извършени след зареждане на документа... ));

Но можете да използвате и по-дълга нотация:

$(document).ready(function())( // действия, които трябва да бъдат извършени след зареждане на документа... ));

Браузърът генерира събитие за зареждане на елемент, когато той и всичките му вложени елементи са напълно заредени. Това събитие е предназначено само за елементи, които съдържат URL адрес: изображение, скрипт, iframe и прозорец.

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

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

Например, нека отпечатаме съобщение на конзолата, когато определеното изображение се зареди:

... $("#image").on("load", function() ( console.log("Image loaded"); ));

Най-често използваните събития в jQuery за проследяване на действията на мишката са:

• mousedown
• mouseup
• щракнете
• движение на мишката
• колело
• завъртам
• mouseenter
• преминаване на мишката
• mouseleave
• mouseout

Събитието щракване е сложно събитие, то се случва след задействане на събитията mousedown и mouseup. Събитието mousedown възниква, когато показалецът е над елемент и бутонът на мишката е натиснат. Събитието mouseup възниква, когато показалецът е над елемент и бутонът на мишката е освободен. Събитието за щракване се задейства, когато курсорът е над елемент и клавишът на мишката се натисне и отпусне. Тези събития могат да бъдат получени от всеки HTML елементс.

Например, нека прикрепим манипулатор към събитието onclick на прозореца. Когато се случи това събитие, манипулаторът ще покаже номера на натиснатия клавиш и координатите на курсора:

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

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

$(".btn").on("click", function())( // код за манипулатора на събитие за щракване върху бутон... )); Кратко описание на събитието кликване: $(".btn").click(function())( ... ));

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

...Скриване на блока след 5 секунди... ... $(".hide-message").click(function(e)( e.preventDefault(); var _this = this; setTimeout(function())( $(_this).closest(". съобщение ").hide(); ), 5000); ));

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

• събития (въвеждане на мишката, преминаване на мишката);
• напускане (mouseleave, mouseout).

Събитията mouseenter и mouseleave в jQuery се различават от mouseover и mouseout само по това, че не се случват, когато курсорът съответно влиза и напуска вътрешните елементи на прослушвания елемент. С други думи, събитията mouseover и mouseout се появяват, но събитията mouseenter и mouseleave не.

Например, нека променим цвета на елемент от списък, когато преместите курсора върху него:

• Химилка
• Молив
• Владетел

Същите действия, но с използване на преминаване на мишката и излизане на мишката:

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

Тези методи не трябва да се използват заедно; те могат да се използват и отделно.

Например, нека преброим броя на посещенията на елемент, когато настъпи събитието Hover:

Брой: 0 ... $("#count").mouseenter(function())( var count = parseInt($(this).find("span").text()); count++; $(this). намери ("span").text(count); ));

Вместо да използвате mouseenter и mouseleave, можете да използвате събитието hover.

Например, нека пренапишем горния пример с помощта на курсора на мишката:

$("ul>li").hover(function())( // при влизане в елемента $(this).css("color","orange"); ), function())( // при напускане на елемент $( това).css("цвят","черно"); ));

Когато използвате събитието hover в jQuery, първият манипулатор се използва за задаване на действието, когато курсорът влезе в елемент (mouseenter), а вторият манипулатор се използва, когато го напусне (mouseleave).

Ако зададете един манипулатор за събитието hover, той ще бъде изпълнен както за обработка на mouse hover, така и за напускане на мишката.

Например:

$("h1").hover(function())( console.log("Възникнаха събития за влизане или излизане от елемент"); ));

Събитието mousemove се изпраща към елемент, когато показалецът на мишката се движи в него. Всеки HTML елемент може да получи това събитие.

$(".target").mousemove(function(e) ( console.log("Извикан манипулатор за събитие mousemove."); console.log("Координати спрямо горния ляв ъгъл на документа: " + e.pageX + ", " + e.pageY); console.log("Координати на курсора вътре в целта: " + e.offsetX + ", " + e.offsetY); ));

Слушането на събитието за превъртане на колелото на мишката може да се направи по следния начин:

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

Това събитие, за разлика от превъртането, се генерира от браузъра само за колелото на мишката и няма значение дали елементът се превърта или не, т.е. може да се използва върху елементи с препълване, равно на скрити. Друга разлика е, че колелото се генерира преди превъртането, а превъртането се генерира след него.

Когато се натисне клавиш от клавиатурата, браузърът генерира събития в следния ред:

Keydown -> keypress -> keyup

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

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

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

Пример, който показва как можете да слушате събитието за натискане на клавиш и да разберете дали е натисната определена клавишна комбинация:

$(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(функция())( $(това).css("цвят на фона", "жълто"); )). keyup(function())( $(this).css("цвят на фона, "розово"); ));

В jQuery можете да маркирате следните събития за елементи на формуляр и други:

• фокус (фокус)
• замъгляване (фокусиране)
• промяна
• вход (за текстови елементиформи)
• изберете
• Изпращане

Събитието за фокусиране се изпраща към елемент, когато той получи фокус. Това събитие се генерира за елементи input, select и link (a href="..."), както и всички други елементи, които имат зададено свойство tabindex. Получаването на фокус върху елемент обикновено се извършва чрез щракване или натискане на клавиша Tab на клавиатурата. Фокусното събитие не избухва.

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

Събитието за размазване се изпраща към елемент, когато той загуби фокус. Точно като фокуса, събитието замъгляване има подобно събитие за фокусиране. Това събитие се различава от замъгляването по това, че може да избухне. Тази функция може да се използва, например, за да го получите на родителски елементи, а не само на елемента, който го е извикал (target).

Например, когато div елемент получи събитие за фокус, задайте неговия фон на оранжево:

... $("#демо"). focusin(function())( $(this).css("background-color","orange"); )) .focusout(function())( $(this).css("background-color","inherit ") ; ));

Няма да е възможно да се направи абсолютно същото, като се използват събитията за фокусиране и замъгляване, защото те не изскачат:

$("#демо въвеждане"). focus(function())( $(this).parent().css("background-color","orange"); )) .blur(function())( $(this).parent().css( "background -color", "inherit"); ));

Събитието за промяна е предназначено да регистрира промяна в стойността на елементите input, textarea и select. За избрани елементи, квадратчета за отметка и радио бутони това събитие се случва незабавно (т.е. веднага щом потребителят направи избор). Но за други елементи това събитие няма да се случи, докато този елемент не загуби фокус.

Пример за използване на събитието за промяна за наблюдение на състоянието на елемент с квадратче за отметка. Наличността на бутона ще се определя в зависимост от състоянието (отметнато или не) на квадратчето за отметка:

Изпрати... $(function() ( $("#agree").on("change", function())( if (this.checked) ( $("#send").prop("disabled", false ); ) else ( $("#send").prop("disabled",true); ) )); ));

Пример, в който ще разгледаме как да получим стойността на избран елемент, когато той се промени:

Първа стойност Втора стойност Трета стойност ... $(function() ( $("#list").on("change", function())( var value = $(this).val(); $("# резултат ").текст(стойност); )); ));

Пример, в който ще разгледаме как да получим всички избрани елементи от селекцията, когато тя се промени:

Зелено Червено Синьо Кафяво Лилаво Сиво ... $("избор") .change(функция () ( var colors = ; $("избор на опция:избрано").each(function() ( colors.push($(this) .text()); )); console.log("Избрани цветове: " + colors.join()); )) .change();

Пример за програмно извикване на събитието за промяна на избран елемент:

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

Пример за използване на събитието за промяна за получаване на стойността на входен елемент:

... $(function() ( // събитие за промяна на входната стойност (възниква само след загуба на фокус) $("input").on("change", function())( var value = $(this).val( ) ; console.log(стойност); )); ));

Но освен събитието за промяна, има и събитие за въвеждане за текстови елементи. Това събитие, за разлика от промяната, се генерира веднага, а не след като елементът загуби фокус.

Пример за използване на входно събитие за получаване на стойността на входен елемент:

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

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

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

Пример, в който ще разгледаме как да използваме събитието за промяна, за да получим стойността на избрания входен елемент с тип равен на радио:

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

Събитието за избор се генерира от браузъра, когато потребителят във входните елементи с type="text" или textarea избере текст.

$("#target").select(function() ( console.log("Извикан манипулатор на събития"); ));

Събитието за изпращане възниква на елемент, когато потребителят се опита да изпрати формуляр. Това събитие може да се добавя само към елементи на формуляр.

Пример за използване на събитието за изпращане:

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

Програмно обаждане за подаване на формуляр:

$("#обратна връзка").submit(); $("#feedback").trigger("подаване");

jQuery използва събитието за превъртане, за да проследи състоянието на превъртане.

Например, нека прикрепим функция към събитието за превъртане на страницата, която ще покаже елемент с класа на превъртане, ако стойността на превъртане е по-голяма от 200px и ще го скрие, ако стойността на превъртане е по-малка от тази стойност.

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

За да чуете събитието за промяна на прозореца на браузъра, използвайте преоразмеряване:

Например, нека създадем манипулатор, който, когато прозорецът на браузъра се промени, ще показва неговата ширина и височина в края на страницата:

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

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

Някои елементи в HTML имат стандартно поведение. Например, когато потребител щракне върху връзка, той отива на адреса, посочен в атрибута href. Ако не се нуждаете от това действие, можете да го отмените. За да замените поведението по подразбиране, трябва да извикате метода preventDefault на обекта на събитието в манипулатора на събития.

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

$("a.service").on("click",function(e)( //отмяна на стандартното действие на браузъра e.preventDefault(); //действия, които връзката ще извърши... ));

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

Текущ елемент (цел) -> родителски елемент на цел -> баба и дядо елемент -> ... -> документ -> прозорец

В jQuery има сценарии, когато някой елемент в представената верига също има манипулатор за това събитие, който не трябва да се изпълнява. И за да не се разпространи това събитие към този елемент, то трябва да бъде спряно. За да направите това, в манипулатора на желания елемент трябва да извикате метода stopPropagation на обекта на събитието. След извикване на този метод, събитието ще спре и няма да избухне.

Например, необходимо е, когато преместите курсора върху елемент с клас на маркиране, съдържанието му да стане оранжево.

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

IN в такъв случайАко не посочите метода stopPropagation, тогава, когато преместите курсора върху елемент span с класа на маркиране, това събитие ще се случи не само за него, но и за всички негови родителски елементи. И това в този пример ще доведе до факта, че цветът не само на текста, ограден в интервала, ще се промени, но и на целия абзац.

Ако трябва да замените поведението на браузъра по подразбиране и да спрете избухването на събитието, в jQuery, вместо да извиквате тези два метода, можете просто да върнете false като резултат от функцията.

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

За да прикачите събитие към елемент, който все още не съществува, можете да използвате следната конструкция на функцията on:

$(документ).на(име на събитие, селектор, манипулатор); // документ или друг съществуващ родителски елемент // eventName - името на събитието // селектор - селектор, който филтрира децата, за които манипулаторът на събитието трябва да бъде стартиран // манипулатор - манипулаторът на събитието

Това действие може да бъде изпълнено поради факта, че събитието изскача и следователно се случва във всички предшественици на този елемент. А обектът, към който се издигат всички събития на страницата, е документ. Затова в повечето случаи го избират. След това, знаейки селектора, функцията on може програмно да избере сред елементите (елементът, който е причинил това събитие (цел) и всичките му предшественици, включително родителя), тези, които му съответстват. И след това за всички избрани елементи изпълнете манипулатора, посочен във функцията on. Действията, чрез които обработката на събитие се прехвърля към друг елемент (предшественик), също се нарича процес на делегиране на събитие в jQuery.

Например, нека добавим събитие към елемент, който все още не е на страницата:

Добавете бутон // когато щракнете върху елемент с id="addButton" добавете нов бутон в горната част на страницата $("#addButton").on("click", function(e) ( $("body ").prepend("Изтрий ме"); )); // добавяне на събитие за кликване, което ще се изпълни за елементи, които все още не са на страницата $(document).on("click"".deleteMe", function() ( $(this).remove(); ));

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

Например ще забраним на хората да следват коментарите. външни връзки(ние ще пренасочим такива действия към страницата далеч):

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

Обработчиците на събития се премахват чрез метода на изключване. Освен това може да се използва за премахване само на онези манипулатори, които са добавени чрез метода on.

Извикването на метода off без аргументи ще премахне всички манипулатори на събития, прикачени към посочените елементи.

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

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

Например, нека премахнем събитието click от всички елементи с класа на връзката:

$(".връзка").off("връзка");

Специален селектор (**) ви позволява да изтривате само делегирани събития, като същевременно запазвате неделегираните:

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

Премахнете само посочените делегирани събития (чрез селектор):

// добавяне на делегирано събитие $("ul").on("click","li", function())( // изведе съдържанието на елемента li към конзолата console.log($(this).text ()); )) ; // премахване на делегираното събитие $("ul").off("click","li");

Премахнете всички делегирани манипулатори на събития за щракване на openModal в модалното пространство от имена за елементи с класа show:

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

jQuery използва методите on и trigger за създаване на персонализирани събития.

Нека да разгледаме как да създадете персонализирано jQuery събитие, използвайки следния пример:

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