Обработката на събития е друга една от онези големи причини да се използва jQuery. Има някои разлики между браузърите в това как да се направи, което jQuery се нормализира в един прост API, като същевременно се прилагат някои най-добри практики.
Има по същество един метод, който трябва да знаете: .on()- работи по следния начин:
$("button").on("click", function() ( // do something ));Тук даваме на .on()метода само два параметъра. Името на събитието („щракване“) и функция, която да се изпълни, когато това събитие се случи на някой от елементите в тази селекция. Чете доста чисто, нали?
Хората с някои предишен опит JQuery може да са запознати с други методи за свързване обичат .bind(), .live()или .delegate(). Не се притеснявайте повече за тях, модерният jQuery ги комбинира, .on()като винаги прави най-добрите практики.
Когато свързвате събитие, както направихме по-горе, можете (и обикновено е умно да) да включите име на параметър във функцията. Този параметър ще бъде „обектът на събитието“ във функцията:
$("button").on("click", function(event) ( // event => "the event object" ));Чрез този обект на събитие получавате много информация. Вече сте малко запознати с него, защото го използвахме .preventDefault()и .stopPropagation(). Но в този обект има и много друга права информация. Неща като какъв тип събитие е било (в случай, че множество събития задействат същата тази функция), кога се е случило, къде се е случило (координати, ако е приложимо), на кой елемент се е случило и много други. Струва си да проверявате редовно обекта на събитието при кодиране.
Съществува концепция за делегиране на събития, която е изключително важна при работата със събития. Това е много умна съвременна най-добра практика. Той включва идеята за обхвата.
Традиционният начин да се мисли за обвързването на събития е като „да се намерят всички бутони на страницата и да се обвърже събитие за щракване към тях“. Това, разбира се, работи, но е:
- Не е много ефективно
- Чуплив
Не е ефективно, защото незабавно принуждавате JavaScript да намери всички тези елементи на бутоните, когато с делегиране може да намерите само един по-лесен за намиране елемент.
Крехък, защото ако на страницата се добавят повече бутони, те вече са пропуснали лодката на обвързването и ще трябва да бъдат презавързани.
С делегиране на събитие бихте свързали това събитие за щракване с елемент, който е по-нагоре в дървото на DOM, отколкото бутоните, които случайно съдържат всички тях. Може да е някъде, може да е documentсамата. Когато свързвате събитието за кликване с този по-горе елемент, вие му казвате, че все още се интересувате само от кликвания, които са се случили върху бутоните. След това, когато се натисне бутон, чрез естеството на балончетата на събитието, това щракване в крайна сметка ще се задейства върху по-горния елемент. Но обектът на събитието ще знае дали първоначалното щракване се е случило върху даден бутон или не и функцията, която сте задали да се задейства за това събитие, ще се задейства или не се задейства, знаейки тази информация.
В този скрийнкаст ние демонстрираме това по следния начин:
$("#scope").on("click", "textarea", function(event) ( // Do stuff! console.log(event); ));Сега си представете, ако сме добавили още едно към това . Не е необходимо да свързваме отново никакви събития, защото събитието все още е щастливо обвързано с обхвата и събитията ще продължат да се издигат от новодобавената текстова област. Това е особено полезно в среди на уеб приложения, където редовно добавяте нови елементи към страницата.
Друго хубаво нещо, което трябва да знаете за свързването на събития jQuery е, че те не се изключват взаимно. Ако добавите друг манипулатор на кликвания към същия елемент, който вече има такъв, той просто ще добави друг. Вие не презаписвате предишния. jQuery просто се справя с това доста грациозно за вас. Винаги можете да ги освободите, ако наистина сте искали да замените преди това свързана функция.
Ако това е същото събитие, струва си да знаете, че за да развържете конкретно едно от тях, а не другото, ще трябва да съпоставите имената на събитията. Това се случва, като се използва точка в името на събитието, например click.namespace.
$("#scope").on("click.one", "textarea", function(event) ( )); $("#scope").on("click.two", "textarea", function(event) ( )); // Just remove the first $("#scope").off("click.one", "textarea");.off(), както не сме го споменавали преди, е как развързвате събития.
Има много възможни DOM събития. Кликването е най-големият очевиден, но има двойно щракване, въвеждане на мишката и оставяне на мишката, клавиш и клавиши, форми, специфични като размазване и промяна и много други. Ако се интересувате от пълния списък, можете да получите такъв.
Можете да свържете няколко събития едновременно по следния начин:
$("#scope").on("keydown keyup", "textarea", function(event) ( console.log(event.keyCode); ));Има някои обстоятелства, при които чакате да се случи събитие, но след като се случи, вече не ви пука за това или изрично не искате да изключите функцията, която вече сте обвързали. Това е .one()функцията. Стандартен случай на употреба е бутон за изпращане на формуляр (ако работите с Ajax или каквото и да е друго). Вероятно искате да деактивирате този бутон за изпращане, след като те го натиснат, докато не можете да обработите тази информация и да им дадете подходящата обратна връзка. Това не е единственият случай на употреба, разбира се, но просто имайте предвид това. .one()== само веднъж.