Какво е и как да използваме метода jQuery on ()

Съдържание

jQuery е библиотека на Javascript, която позволява да се опрости начинът на взаимодействие с HTML документи, манипулиране на DOM дървото, обработка на събития, разработване на анимации и добавяне на взаимодействие с техниката AJAX към уеб страници.
От версия 1.7 на jQuery имаме метода on (), който ни предлага всички необходими функции за управление на събития. Благодарение на този метод вече не се нуждаем от стария bind (), live () или delegate (), но не се нуждаем и от blur (), focus (), click (), hover () и други.
Точно както има on (), имаме неговата противоположност, off (), която премахва събитията, назначени с on ().
Ще видим поредица от примери, за да разберем по -добре метода on ().
Да предположим, че искаме да изпълним функция при натискане на бутон:
 (function () {$ ('button'). click (function () {// код за изпълнение});}) ();

Сякаш традиционно бихме го направили с click (). Но ако погледнем кода на jQuery, ще видим, че всъщност се случва, че се извиква методът on (), така че най -бързото нещо е да направите:
 (function () {$ ('button'). on ('click', function () {// код за изпълнение});}) ();

Това е най -прекият маршрут. Същото се отнася и за други методи, като change (), hover (), mouseenter () и т.н.
Нека да разгледаме jQuery. Ако изтеглим версия 1.7 или по -нова и разгледаме нейния код, ще видим следното:
 jQuery.each (("размазване фокусиране фокус при фокусиране натоварване преоразмеряване превъртане разтоварване щракване dblclick преместване на мишката преместване на мишката преместване на мишката мишката върху мишката мишката напускане на мишката промяна изберете изпращане изпращане на клавиша надолу натискане на клавиша грешка при изваждане на контекста меню"). split (""), f функция (i, име) {// Манипулиране на свързване на събития jQuery.fn [име] = функция (данни, fn) {if (fn == нула) {fn = данни; данни = нула;} връщане на аргументи.дължина -> 0? This.on (име, нула, данни, fn): this.trigger (име);};

Оттук ни интересува само да видим, че методите „размазване, фокусиране, фокусиране, фокусиране, зареждане, преоразмеряване, превъртане, разтоварване, щракване, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error и contextmenu "в края всичко завършва на" this.on (име, нула, данни, fn) ".
bind (), live () и delegate ()
В миналото също беше направено:
 (function () {$ ('button'). bind ('click', function () {// код за изпълнение при щракване на бутона});}) ();

Или ако искаме събитието да работи дори след добавяне на нови елементи „бутон“ към документа, тогава бихме използвали метода live ():
 (function () {$ ('button'). live ('click', function () {// код за изпълнение при щракване на бутона});}) ();

Впоследствие jQuery въведе „делегат ()“, което ни позволи да присвоим събитие на контекст. Например, ако бутонът е (или ще бъде, ако бъде добавен по -късно) вътре в div с класа "контейнер":
 (function () {$ ('div.container'). delegate ('button', 'click', function () {// код за изпълнение при щракване на бутона});}) ();

Но както при предишните, и bind (), live () или delegate () всичко, което правят, е да извикат метода on ().Хареса ли ви и помогнахте на този урок?Можете да възнаградите автора, като натиснете този бутон, за да му дадете положителна точка
wave wave wave wave wave