Обработка на събития с jQuery

The събития са ситуации, които се случват в нашия документ HTML, може да се задейства от ситуации на самата система или от действия на потребителя. И в двата случая, когато възникне събитие, е възможно да се извърши постобработка с помощта jQuery, за да можем да постигнем по -добри ефекти в нашите програми.
Това е от изключително значение, тъй като познавайки този аспект и с помощта на рамката можем да придадем на нашите уеб страници и приложения повече динамика.
Това е първото нещо, на което трябва да отговорим, когато работим със събития в jQuery, Вече казахме, че събитията са действия или ситуации, които се задействат от системата или от потребителя, например, когато документът приключи зареждането на системата задейства събитието готов или готов, когато потребител кликне върху елемент, се задейства едноименно събитие.
Имайки предвид тези малки примери, можем да видим основния синтаксис за обработка на всеки тип събитие, което е следното:

$ (селектор) .on ("име на събитие", функция () {….})

Нека запомним или изясним, че селекторът е името, с което ще локализираме елемента в нашия документ, след това с помощта на метода .На () След това можем да му кажем за какво събитие трябва да слуша и когато го открие, може да изпълни анонимна функция в нашия скриптов раздел на HTML.
Нещо интересно, което можем да подчертаем, е, че можем да използваме a манипулатор за различни събитияС други думи, можем да извършим едно и също действие за няколко ситуации, трябва само да изброим различните събития, които трябва да бъдат изслушани, синтаксисът е много подобен на този, който току -що видяхме.
$ (селектор) .on ("име на събитие1 име на събитие2 име на събитие3 ….", функция () {….})
Тъй като знаем най -основното, трябва да започнем да знаем и това jQuery Винаги ще улеснява живота ни като разработчици, затова е предоставил някои преки пътища за създаване на манипулатори на събития, като с това не е нужно да правим пълната декларация, както видяхме в предишната част, но прилагаме тези преки пътища директно към селектора.
Нека да видим някои от най -интересните преки пътища, използвани от разработчиците, трябва да се отбележи, че това не е пълният списък с наличните, за да получите този списък е по -добре да отидете директно в официалната документация, но за да започнете малко по темата, това е повече от достатъчно.
готов ()Изпълнява се, когато всички елементи на документа СЛЪНЦЕ те се зареждат, тоест когато сайтът е готов, оттам идва и името му. Трябва да се отбележи, че това е системно събитие.
Изпращане ()Това се случва, когато направим a подаване на формулярИнтересното е, че когато формата се появи, тя не се изпраща по традиционния начин, а по -скоро чака това, което това събитие й казва, така че можем да я използваме като междинна точка за валидиране на полето, за да споменем пример за нейното използване.
щракнете ()Той се изпълнява, когато потребителят го прави щракнете с показалеца на мишката върху елемент, той може да бъде от поле за тип на въвеждане, за да включва елементи като или котвите . Как бихме могли да кажем, е събитие, задействано от потребителя.
размазване ()Това се случва, когато елементът, върху който се намираме в момента, е извън фокуса, например пишем в текстово поле и отиваме на следващо поле, в този случай първото поле е загубило фокус и това събитие се изпълнява.
фокус ()За разлика от предишното събитие, това се случва точно когато се фокусираме върху елемент.
задръжте ()Това събитие се случва, когато задържим курсора на мишката върху някой елемент от СЛЪНЦЕ, обикновено може да се приложи към и котви .
изберете ()Възниква, когато изберем елемент в поле изберетеНапример имаме падащ списък и избираме елемент от съдържанието му.
промяна ()Възниква при промяна на стойността или състоянието на елемент, например в рамките на поле изберете, когато променим опцията, която виждаме отразена там.
Тъй като знаем малко за най -използваните събития, ще генерираме малък документ, който прилага някои от тях на практика, или в техния пълен синтаксис, или с примери, така че да можем да експериментираме и с двете форми.
В следния код ще видим как първоначално ще пишем console.log () когато имаме документа готов (), тогава ще приложим друго съобщение, когато задържим мишката върху a за да потвърдите как работи задръжте, накрая ще видим как да го използваме щракнете () Y фокус () за показване на други съобщения. Нека да разгледаме кода, който описва горното:

 Пример за събитие 1
Наведете мишката върху този Div !!

Напиши нещо тук:
Фокусирай се върху мен:
$ (document) .ready (function () {console.log ("Готовото събитие се е случило !!");}); $ ("# събитие с ховър"). hover (function () {console.log ("Събитие с ховър се случи!");}); $ ("# Click click event"). Click (function () {console.log ("ние сме задействали Click събитие Увеличете
Това се случва, когато искаме даден елемент да има различни свързани събития, по този начин можем да организираме по -добре нашия код и да предоставим множество функции на нашия елемент.
Има две възможности, изпълняване на едно и също действие за няколко събития или изпълнение на различно действие за всяко едно, по какъвто и начин да искаме, ще трябва да използваме пълния синтаксис, първият, който вече сме дефинирали в началото.
Нека да видим как да свържем различни действия с различни събития за един и същ елемент. За това трябва да използваме основен синтаксис като следния:

 $ (селектор) .on ({EventName1: function () {…}, EventName2: function () {…}}); 

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

 $ (селектор) .ShortcutEvent1 (функция () {}); $ (селектор) .ShortcutEvent2 (функция () {}); 

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

 Пример за събитие 2
Същият резултат множество събития:

Различни резултати за събитие:
$ ("# element1"). on ("фокус върху щракване", function () {console.log ("показваме същото за 3 събития!");}); $ ("# element2"). on ({click: function () {console.log ("щракнахме върху element2");}, focus: function () {console.log ("фокусирахме се върху element2") ;}}); 

Тук виждаме, че трябва да бъдем внимателни с втората форма на различни отговори за различни събития, тъй като събитията не влизат в кавички, както когато го правим в първата форма, също така, че трябва да заградим в скоби {} всичко в метода .На (), това е грешка, която може да възникне много често, така че с тази предпазна мярка можем да я избегнем. Сега нека видим как изглежда нашият пример, когато го стартираме в браузъра си:

Увеличете
Отбелязваме брояча с а номер 2 когато се случат събитията по първия елемент, това означава, че сме извършили едно и също действие два пъти, както сме планирали. Във втория елемент забелязваме, че отпечатваме двете определени действия в конзолата, въпреки че също така виждаме, че те се случват в различен ред от този, в който сме ги поставили, това е така, защото събитието на фокус се случва преди щракнете в йерархията на събитията, особено ако използваме ключа РАЗДЕЛ за да се движите между полетата.
В края на този урок научихме как можем да започнем в света на обработката на събития jQueryТова е само отваряне на устата, но с тези малки функции можем да постигнем много неща в нашите приложения.

Помогна ли ви този урок?
Ако не

ПОМОГНЕТЕ ПОДОБРЕТЕ ТОЗИ УРОК!
Смятате ли, че можете да коригирате или подобрите този урок? Можете да изпратите изданието си с промените, които смятате за полезни.
0 потребители са редактирали този урок. Редактирайте и станете признат експерт!
Редактирайте този урок

Сходни уроци

Как да плъзнете и вземете изображения с потребителския интерфейс на JQueryКак да направите Spinner или икона за зареждане с JQueryJQuery плъгини и библиотеки за уеб разработкаДинамична мрежа Flexigrid с JQuery и PHPРабота с JSON с Node.jsОбработка на събития в Node.jsОбработка на буфери в Node.jsРегулярни изрази с Jquery
Без коментари, бъдете първи!
Не чакайте повече и влезте в SolveticОставете вашите коментари и се възползвайте от потребителския акаунт Присъединете се към нас!

Създай акаунтРегистрирайте се БЕЗПЛАТНО, за да имате своя Solvetic акаунтРегистрирайте акаунт
ИдентифицирайтеИмате ли вече акаунт? Влезте тукИдентифицирайте ме в моя акаунт




Информация

 Публикувано 12 декември 2014 г. 14:44
 Актуализирано 14 декември 2014 г. 05:44
 Посещения 3,7 хиляди
 НивоПрофесионален


Най -новите уроци по JavaScript

Как да актуализирате NPM с PowerShell в Windows 10
Как да плъзнете и вземете изображения с потребителския интерфейс на JQuery
Как да направите Spinner или икона за зареждане с JQuery
Как да преведете уебсайт на няколко езика

Вижте още JavaScript