Share
Det är viktigt att komma ihåg att du kan deklarera så många anpassade redo() händelser som du skulle vilja. Du är inte begränsad till att bifoga en enda .redo() händelse till dokumentet. De redo() händelser exekveras i den ordning de ingår i.
Anmärkningar: Passerar jQuery-funktionen, en funktion - t.ex.. jQuery (funciton () // kod här) - är en genväg för jQuery (dokument) .ready ().
Använda binda() metod - t.ex.. jQuery ( 'a'). bind ( 'klick', function () ) - Du kan lägga till någon av följande standardhanterare till lämpliga DOM-element.
Accentsconagua
fläckfokusladdaändra storlekskrollalasta avbeforeunloadklickdblclickmousedownmouseupmousemouseovermouseOutBytaVäljlämnanyckel nerknapptryckningkeyUpfelSjälvklart, baserat på DOM-standarder, är det bara vissa hanterare som sammanfaller med vissa delar.
Förutom den här listan över standardhanterare kan du också utnyttja binda() att bifoga jQuery anpassade hanterare - t.ex.. mouseenter och mouseleave - såväl som eventuella anpassade hanterare du kan skapa.
För att ta bort standardhanterare eller anpassade hanterare passerar vi helt enkelt Unbind () Metod Hanterarens namn eller anpassat hanteringsnamn som måste tas bort - t.ex.. jQuery (A). Unbind ( 'klick'). Om inga parametrar skickas till Unbind (), Det kommer att ta bort alla hanterare som är anslutna till ett element.
Dessa begrepp som just diskuterats uttrycks i koden nedan.
Anmärkningar: jQuery ger flera genvägar till binda() Metod för användning med alla standard DOM-händelser, som utesluter anpassade jQuery-händelser som mouseenter och mouseleave. Genom att använda dessa genvägar innebär det bara att byta händelsens namn som metodnamn - t.ex.. .klick(), mouseOut (), fokus().
Du kan bifoga obegränsade hanterare till ett enda DOM-element med jQuery.
jQuery tillhandahåller ett() händelsehanteringsmetod för att enkelt binda en händelse till DOM-element som kommer att utföras en gång och sedan tas bort. De ett() Metoden är bara en omslag för binda() och Unbind ().
Genvägssyntaxen - t.ex.. .klick(), mouseOut (), och fokus() - för att binda en händelsehanterare till ett DOM-element kan också användas för att aktivera hanterare programmatiskt. För att göra detta, använd helt enkelt genvägsmetoden utan att ge den en funktion. I teorin innebär det att vi kan binda en hanterare till ett DOM-element och sedan omedelbart åberopa den hanteraren. Nedan demonstrerar jag detta via klick() händelse.
Säg hej Säg hej
Anmärkningar: Det är också möjligt att använda evenemanget utlösaren () metod för att åberopa specifika hanterare - t.ex.. jQuery ('a'). klicka (funktion () alert ('hi')). trigger ('klick'). Detta kommer även att fungera med namespaced och anpassade händelser.
jQuery normaliserar händelseobjektet enligt W3C-standarder. Det betyder att när händelseobjektet skickas till en funktionshanterare behöver du inte oroa dig för webbläsarspecifika implementeringar av händelseobjektet (t.ex. Internet Explorer window.event). Du kan använda följande attribut och metoder för händelseobjektet utan bekymmer från webbläsarens skillnader eftersom jQuery normaliserar händelseobjektet.
event typevent.targetevent.dataevent.relatedTargetevent.currentTargetevent.pageXevent.pageYevent.resultevent.timeStampevent.preventDefault ()Event.isDefaultPrevented ()Event.stopPropagation ()event.isPropagationStopped ()Event.stopImmediatePropagation ()event.isImmediatePropagationStopped ()För att komma åt det normaliserade jQuery-händelsesobjektet, skicka helt enkelt den anonyma funktionen, skickad till en jQuery-händelsemetod, en parameter som heter "händelse" (eller vad du vill kalla det). Sedan, inuti den anonyma återuppringningsfunktionen, använd parametern för att komma åt händelseobjektet. Nedan är ett kodat exempel på detta koncept.
Ofta kommer vi att ha ett objekt i DOM som behöver ha flera funktioner knutna till en enda händelsehanterare. Till exempel, låt oss ta storlek på hanteraren. Med jQuery kan vi lägga till så många funktioner till window.resize handler som vi vill. Men vad händer när vi behöver ta bort en av dessa funktioner men inte alla? Om vi använder $ (Fönster) .unbind (resize), alla funktioner som är anslutna till window.resize handler kommer att tas bort. Genom namespacing en handler (t.ex.. resize.unique) kan vi tilldela en unik krok till en specifik funktion för borttagning.
I ovanstående kod lägger vi till två funktioner till resize handler. Den andra (dokumentorder) resize-händelsen läggs till använder händelsesnamnspacing och tar omedelbart bort den här händelsen med Unbind (). Jag gjorde detta för att poängtera att den första funktionen som bifogas inte tas bort. Namespacing-händelser ger oss möjlighet att märka och ta bort unika funktioner som tilldelats samma hanterare på ett enda DOM-element.
Förutom att binda upp en specifik funktion som är associerad med ett enda DOM-element och hanterare, kan vi även använda händelsemängdsavstånd för att uteslutande anropa (med användning av utlösaren ()) En specifik hanterare och funktion kopplad till ett DOM-element. I koden nedan läggs två klickhändelser till , och sedan använder namespacing, bara en påkallas.
klick
Anmärkningar: Det finns ingen gräns för djupet eller antalet namnrymden som används - t.ex.. resize.layout.headerFooterContent.
Namespacing är ett utmärkt sätt att skydda, åberopa, ta bort alla exklusiva hanterare som ett plugin kan behöva.
Namespacing fungerar med anpassade händelser samt standardhändelser - t.ex.. click.unique eller myclick.unique.
Evenemangsdelegation är beroende av händelseförökning (t.ex. bubbling). När du klickar på en insidan av a , som är inuti a till till
Det innebär att vi fäster en klickhändelse till en som är inkapslad inuti event.target) för att identifiera vilket element i DOM som faktiskt orsakade att händelsen bubblade att börja. Återigen kommer detta att ge oss en hänvisning till det element som började bubbla.
Genom att göra det kan vi till och med lägga till en händelsehanterare på en hel del DOM-element med endast en enda händelsehanterare / deklaration. Detta är extremt användbart; till exempel ett bord med 500 rader där varje rad kräver en klickhändelse kan dra nytta av händelsedelegation. Undersök koden nedan för att förtydliga.
Nu, om du skulle bokstavligen klicka på en av de faktiska kulorna i listan och inte länken själv, gissa vad? Du kommer sluta ta bort event.target är , inte den . Eftersom detta är fallet, förälder() Metoden kommer att ta tag i när det klickas från en genom att passera förälder() Metod ett elementuttryck.
$ (Event.target) .parent (li) bort ().
Den viktiga punkten här är att du måste hantera noga vad som klickas när det klickbara området innehåller flera inkapslade element på grund av det faktum att du aldrig vet exakt var användaren kan klicka. På grund av detta måste du kontrollera att klicket inträffade från det element du förväntade dig att.
Använda det praktiska leva() händelsemetod kan du binda hanterare till DOM-element som för närvarande finns på en webbsida och de som ännu inte har lagts till. De leva() Metoden använder händelsesdelegation för att säkerställa att nyskapade / skapade DOM-element alltid svarar på händelsehanterare oavsett DOM-manipuleringar eller dynamiska ändringar i DOM. Använder sig av leva() är i grunden en genväg för att manuellt behöva inrätta händelsesdelegation. Till exempel, med användning av leva() vi kunde skapa en knapp som skapar en annan knapp på obestämd tid.
Efter att ha granskat koden bör det vara uppenbart att vi använder leva() att tillämpa händelsesdelegation till ett moderelement ( element i kodexemplet) så att varje knappelement som läggs till DOM alltid svarar på klickhanteraren.
För att ta bort liveevenemanget använder vi helt enkelt dö() metod-t.ex.. $ ( 'Knappen'). Die ().
Konceptet att ta bort är leva() Metoden kan användas för att bifoga händelser till DOM-element som tas bort och läggs till med AJAX. På så sätt skulle du avstå från att binda till händelser till nya element som infördes i DOM efter den första sidbelastningen.
Anmärkningar: leva() stöder följande hanterare: klick, dblclick, mousedown, mouseup, mouse, mouseover, mouseOut, nyckel ner, knapptryckning, keyUp.
leva() fungerar bara mot en väljare.
leva() som standard stoppar förökning genom att använda returnera falskt inom funktionen som skickas till leva() metod.
Det är möjligt att skicka evenemanget binda() Metod flera händelsehanterare. Detta gör det möjligt att bifoga samma funktion, skrivet en gång, till många hanterare. I kodexemplet nedan bifogar vi en enda anonym återkallningsfunktion till klicket, knapptryckningen och ändra storlek på händelsehanterare på dokumentet.
När en länk är klickad eller en blankett skickas in, kommer webbläsaren att använda sin standardfunktionalitet som är associerad med dessa händelser. Klicka till exempel på en länk och webbläsaren försöker ladda värdet av href attribut i det aktuella webbläsarfönstret. För att stoppa webbläsaren från att utföra denna typ av funktionalitet kan du använda prevent () Metoden för det jQuery-normaliserade händelseobjektet.
jQuery
Händelser sprids (t.ex. bubblor) upp DOM. När en händelsehanterare avfyras för ett visst element, åberopas även den åberopade händelsehanteraren för alla förfaderelement. Detta standardbeteende underlättar lösningar som evenemangsdelegation. För att förbjuda denna standardbubbling kan du använda jQuery-normaliserad händelsemetod stopPropagation ().
sluta
I koden exemplet ovan är händelsehanteraren kopplad till Återkommer falskt - t.ex.. Om du skulle kommentera Med jQuery har du möjlighet att tillverka dina egna anpassade händelser med hjälp av Nu, eftersom dessa händelser är anpassade och inte kända för webbläsaren, är det enda sättet att anropa anpassade händelser att programmera dem ut med jQuery Som standard klonar DOM-strukturer med Genom att bifoga en Det är ofta nödvändigt att få X-och Y-koordinaterna för muspekaren i förhållande till ett annat element än visningsporten eller hela dokumentet. Det görs vanligen med ToolTips, där ToolTip visas i förhållande till den plats som musen svävar. Detta kan enkelt åstadkommas genom subtraktion av offset för det relativa elementet från visningsportens X- och Y-muskoordinater.
Avbryta standardbeteende och händelseförökning Via
returnera falskt returnera falskt - är lika med att använda båda prevent () och stopPropagation (). Klicka här returnera falskt uttalande i koden ovan, varna() skulle bli åberopat eftersom webbläsaren som standard kommer att exekvera värdet av href. Dessutom skulle sidan navigera till jQuery.com på grund av händelse bubbla.
Skapa anpassade händelser och utlös dem via trigger ()
binda() metod. Detta görs genom att tillhandahålla binda() metod med ett unikt namn för en anpassad händelse.utlösaren () metod. Undersök koden nedan för ett exempel på en anpassad händelse som åberopas med utlösaren ().
Kloning evenemang såväl som DOM-element
klona() Metoden klonar dessutom inte heller de händelser som är fästa vid DOM-elementen som klonas. För att klona elementen och händelserna som är kopplade till elementen måste du passera klona() Metod ett booleskt värde av Sann. Lägg till en annan länk
Få X och Y Koordinater för musen i Viewport
mouse händelse till hela sidan (dokument) kan du hämta muspekarens X- och Y-koordinater när den rör sig inuti i visningsporten över duken. Detta görs genom att hämta SidanY och SidanX Egenskaper för det jQuery-normaliserade händelseobjektet.
Få X och Y Koordinater av musen i förhållande till ett annat element
