Jquery - обработка на събитие, ИТ директор
В тази статия, ние считаме, че методите JQuery библиотеката осигурява уеб разработчик да се справят събития.
Работа събития с методи JQuery
Синтаксисът на
Преди да се пристъпи към добавите манипулатори на събития елементи, трябва да бъдат получени тези елементи. Научете как да намерите най-необходимите елементи на страницата, може да бъде в статия JQuery - Избор на предмети.
В JQuery затвори събитие (събитие слушател) към конкретен елемент, можете да използвате по едно и функции. и обобщението записва нататък.
една функция е различна от само на факта, че то отговаря на водача, когато даденото събитие се случи само веднъж.
Например, добави функция при кликване събитие за всички елементи с класа на BTN:
Горният код, написани с помощта на стенограмите на функция:
Допълнителна информация за събитието
При обработването на събитието можете да разберете малко повече информация за него. Прехвърлянето на тази информация, а именно манипулатор на събитие обект събитие винаги се носи от първия аргумент.
пространство от имена
В JQuery след уточняване на името на събитието все още можете да избор да зададете пространство от имена.
пространство от имена - много удобно нещо. Той се използва, например, когато трябва да се обади, не всички събития, но само до известна име.
Също така с него е много лесно да се премахнат някои събития:
Описание и примери за задействане функции и се разглеждат в статията на разстояние малко по-ниско.
Предаване на допълнителните данни в манипулатор
Ако е необходимо, можете да прехвърляте данни към събитието манипулатор (чрез определяне на допълнителен аргумент на функцията). Достъп до данните, предавани в рамките на процесора, с предмет на събитието.
Това се извършва, както следва (пример):
Как да се мотае с няколко събития на един елемент
Един пример за използване на един процесор за множествена (два или повече) от събития:
Всяко събитие има своя собствена функция:
Един пример за използване на няколко работещи в JQuery (функция) за едно събитие:
Например научете събитие ще се извършва в приоритетите може да бъде, както следва:
Софтуер повикване събитие
За да извикате събитията от кода в JQuery има 2 метода:
- спусъка - причинява конкретното събитие, за елемента.
- triggerHandler - причинява събитието манипулатор не се случва в същото време самото събитие.
JQuery - събитие за зареждане на страницата (готово)
Процесът на прибавяне на елемент за манипулатор събитие обикновено се извършва след зареждане на страницата, т.е. когато той построява DOM дървото на документа. В противен случай, при писане на манипулатора, можете да се обърнете към елементи, които не са вече на страницата.
Най-бързите събития запис в страницата за изтегляне на JQuery изглеждат по следния начин:
Но, можете да използвате дълъг запис:
JQuery - Boot събитие (натоварване)
Браузърът на натоварване събитие генерира елемент, когато той и всички елементи, вградени в него са били напълно зареден. Това събитие е само за елементите, в които има URL: изображение. скрипт. и вградена рамка прозорец.
Например, за да изпълнява функция, когато страницата е напълно заредена (включително изображения):
Така например, показва съобщение на конзолата, когато конкретният образ ще се изтегли:
събития мишка - JQuery
В JQuery за проследяване на действия на мишката най-често се използват следните събития:
JQuery - Кликнете събитие (кликнете)
Кликнете събитие е сложен случай, това се случи след генериране mousedown и mouseup събития. mousedown събитие се случва, когато показалецът е над елемента и един бутон на мишката е натиснат. mouseup събитие се случва, когато показалецът е над елемента и един бутон на мишката е освободена. Кликнете събитие се генерира, когато курсорът е над елемента и един бутон на мишката е натиснат и освободен. Тези събития могат да получават никакви HTML елементи.
Например, виси манипулатор за събитието OnClick прозорец елемент. При настъпване на събитието манипулатор ще покаже броя на натискане на бутона, а курсорът координати:
Например, виси на OnClick събитие за всички елементи с клас BTN:
Стенографски събития, като кликнете върху:
Например, ние се обясни как да се скрие блокира известно време след кликването събитие:
JQuery - висене събитие (висене)
JQuery - Какво е случай на задържане на курсора
Просто представи случай курсорът е сложен и се състои от 2 събития:
- въвеждане (mouseenter, Задържането на курсора);
- избягат (mouseleave, е извън него).
Събития mouseenter и mouseleave в JQuery различават от Mouseover е извън него само с това, че те не се появяват, когато курсора съответно влиза и оставя на вътрешните елементи на елемента на слушане. С други думи, на курсора на мишката е извън него събития се появяват и mouseenter и mouseleave - не.
Например, промяна на цвета на елемент от списъка, когато курсорът на представянето му:
Същата процедура, но с помощта на курсора на мишката е извън него:
Тези методи са по избор се използват заедно, те могат да се използват поотделно.
Например, брои броя на посещенията на елемента, когато събитието "Преодоляване на мишката":
Вместо да се използват mouseenter и mouseleave можете да използвате навъртам събитие.
Например, презапис примера по-горе, като се използва изскачащата:
При използване на висене събитие в JQuery, първият преработвател се използва за определяне действия при въвеждане на курсора елемент (mouseenter), а втората - при напускане (mouseleave).
Ако посочите манипулатор висене събитие, то ще бъде извършено за обработка на изскачащата и нейното спасение.
движения на мишката събития - JQuery
mousemove събитие се изпраща към елемент, когато се движи показалеца на мишката в нея. Всеки HTML елемент може да получи това събитие.
JQuery - Събитие колелцето на мишката (колело)
Слушане събития Scroll Wheel (колело) на мишката може да се извършва, както следва:
Това събитие е в контраст с превъртане на браузъра се генерира само за колелцето на мишката, независимо от това дали елемент за превъртане, т.е. С него можете да работите върху с препълване елементи. равно скрити. Друга разлика се състои в това, че колелото се генерира, за да превъртите и превъртете - след него.
JQuery - ключови събития
Когато натиснете бутоните на браузъра клавиатура генерира събития в следния ред:
- keydown (ключът е натиснат, но все още не са освободени);
- на натискане на клавиш (събитие се генерира за буквите, цифрите и други бутони, с изключение на мениджъри) - има за цел да получите кода характер (keydown събития и keyup да ти кажа само ключа за кода, но не и характера);
- keyup (генериран от браузъра, когато ключов е освободен).
Например, напиши манипулатор, за да слушате всички събития, които се случват, когато е натиснат клавиш:
Един пример, който показва как да слушате натискане събитие и да научат дали заяви натискане на клавиш комбинация:
Пример за това как да слушате комбинацията от клавиши Ctrl + Enter:
Пример за използване на събития keydown и keyup:
JQuery - Събития образуват елементи
В JQuery, можете да се подчертаят следните събития до елементите на формата и още:
- фокус (focusin)
- размазване (focusout)
- промяна
- вход (за текстови елементи образуват)
- изберете
- представя
JQuery - Събития получаване и губят фокус
Фокус събитие се изпраща към елемент, когато получи съсредоточи. Това събитие се генерира за входните елементи. и изберете връзки (един HREF = "."), както и всички други елементи, които tabindex набор собственост. Подготовка фокус елемент обикновено се осъществява чрез кликване или натискане на клавиша Tab на клавиатурата. Фокус събитие не плава.
В допълнение, има подобно събитие фокус, го нарича focusin. За разлика от събитието се фокусира тя се издига, и например може да се използва, за да открие елементи майки събитие фокус.
Събитието размазване се изпраща към елемент, когато загуби съсредоточи. Както и фокус. замъгляване събитие има подобен focusout събитие. Това събитие е различно от замъгляването, така че да може да плава. Тази функция може да се използва, например, за получаването му при майка елемент, не само на елемент, който го е причинило (цел).
Например, при получаване на елемент Разделение фокус събития ще го оранжев фон:
Точно по същия план с помощта на фокус и размазване събития не се окаже, тъй като те не излезе:
JQuery - промяна събитие (промяна)
Промяна на събитие е за записване на входните елементи промяна стойност. текстовото поле и изберете. За да избирате точки. отметки. и радио бутони Това събитие се случва веднага (т.е. веднага след като потребителят прави някакъв избор). Но това събитие няма да се осъществи за други елементи, толкова дълго, колкото този елемент не губи фокус.
Пример за използване на събитието промяна в контрола на състоянието на елемента от квадратчето. Бутонът е достъпен, ще определи в зависимост от това състояние (проверени или не), за да се провери:
Един пример, в който ние считаме, как да изберете стойността на елемента, когато тя се променя:
Един пример, в който ние считаме, как да изберете всички избрани елементи в неговата промяна:
ПРИМЕР събития за промяна на софтуера повикване, за да изберете елемента:
Пример за случай на промяна за промяна на стойностите на входните елементи:
Но в допълнение към събития променят имаме повече вход събитие за текстови елементи. Това събитие е в контраст с се генерира веднага промяната, вместо след елемент намалява съсредоточи.
Един пример за използване на въведеното събитие за получаване на входната стойност елемент:
Пример, в който показва един начин за получаване на стойности на текстовото поле елемент:
Един пример, в който решава как да използва събитията промени, за да се получи стойността на избрания елемент от типа вход. равно на радиото:
JQuery - избор на събития (изберете)
изберете случай на подбор се генерира от браузъра, когато потребителят е вътре входните елементи с тип = "текст" и текстово поле избира текст.
JQuery - събитие и изпратете формата (представя)
представя събитие в елемента, когато потребителят се опита да изпрати формуляра. Това събитие може да се добави само елементите на формата.
Пример за използване на събития представят:
Предизвикателството на софтуер и изпратете формата по:
JQuery - превъртане събитие (превъртане)
За да се следи състоянието на книгата се използва в JQuery превъртане събитие.
Например, виси на функцията събитие на страница свитък, който ще показва елемент с клас scrollup. ако стойността е по-голяма от 200px свитък и да го скрие, ако книгата е по-малка от тази стойност.
JQuery - Събитие прозорец преоразмеряване (преоразмеряване)
За да слушате случай на прозореца на браузъра промяна се използва за оразмеряване:
Например, създаването на манипулатор, че ще се промени, когато прозореца на браузъра, за да покажете страницата в края на своята ширина и височина:
JQuery - Отмяна на поведението по подразбиране на събитията
Например, за да се наложи над нормалното поведение на всички връзки на страница като първокласно обслужване:
Това, което е на повърхността и как да го спре
JQuery - Как метод stopPropagation
В допълнение към премахване на стандартната действието на механизма на събитието има такова нещо като изкачването. Тя се състои в това, че когато браузърът генерира събитие, го прави не само за текущия елемент (целта), но и за всички негови потомци включително родител:
В JQuery има сценарии, при които представиха във веригата на всеки елемент имат една и съща манипулатор за това събитие, което е ненужно. И за това събитие няма да се разпространи и в тази позиция, той трябва да бъде спрян. За тази цел е необходимо елемент манипулатор трябва да се обадите stopPropagation обект събитие. След като нарече този метод, събитието ще спре и няма да плава.
Например, необходимо е да се представи показалка достъп до даден елемент с марка клас. съдържанието му стана оранжево.
В този случай, ако не укажете метод stopPropagation. Просто представи курсора елемент педя с марка клас това събитие се случва не само него, но и на всички свои предци. И това е в този пример ще предизвика такъв цвят на климата е не само текста в участъка. но също така и за целия параграф.
Ако имате нужда, за да отмените поведението по подразбиране на браузъра и да се спре на събитията изкачване на JQuery вместо да извикат тези два метода, може просто да се върне като резултат от функцията е невярно.
Добавяне на събития към динамично създадените обекти
С цел да се мотае случай на елемент, който все още не е, можете да използвате следната структура на функция:
Това действие може да се извърши, поради факта, че събитието се появи, и следователно има всички предци на този елемент. Целевата е отворен за всяко събитие в страницата е документ. Поради това, в повечето случаи, изберете точно това. След като знаем това селектор, върху функцията на софтуера може да бъде избран измежду елементи (елементи, които са задействали събитието (цел) и всички негови предци, включително родители) са тези, които отговарят на това. И тогава за всички избрани елементи изпълнява функциите, посочени в манипулатор нататък. Действия от който случай се прехвърля в друга обработка елемент (предшественик) се нарича в JQuery Повече процеса на делегация събитие.
Например, добавите събитие към елемента, които все още не са на страницата:
Делегация може да се използва не само за обработка на събитието е динамично създадените обекти, но не и да бъде свързана с всеки елемент (ако една страница може да бъде много много) манипулатор.
JQuery - Премахване на събитието манипулатор
Премахване със събития, като се използва метода на разстояние. Така с помощта на това тези работещи могат да бъдат отстранени само чрез метода се прибавя на.
Прибери метод без аргументи премахва всички имат тези елементи, добавени към тях със събития.
Например, забранете всички товарачи от елементите с линк клас:
Така например, премахване на клик събитие за всички елементи с връзката на класа:
Специално за избор (**) само ви позволява да премахнете делегирани събития запазване не делегира:
Премахване само указаните делегирани събития (с помощта на селектор)
Премахване на всички работещи openModal делегирани събитието кликване в пространството на модалните имена за елементи с клас шоу:
Създаване на персонализирано събитие
За създаване на собствени събития в методи JQuery се използват на и спусъка.
Принципът на създаване на специален JQuery събитие разгледа със следните примери: