Share
Het is belangrijk om in gedachten te houden dat u zoveel gewoontes kunt aangeven klaar() evenementen zoals je zou willen. Je bent niet beperkt tot het bijvoegen van een single .klaar() evenement van het document. De klaar() gebeurtenissen worden uitgevoerd in de volgorde waarin ze zijn opgenomen.
Opmerkingen: Doorgeven van de jQuery-functie, een functie - bijv. jQuery (funciton () // code hier) - is een snelkoppeling voor jQuery (document) .ready ().
De ... gebruiken binden() methode - bijv. jQuery ( 'a'). bind ( 'klik', function () ) - u kunt een van de volgende standaardhandlers toevoegen aan de juiste DOM-elementen.
Accentsconagua
vervagenfocusladenverkleinenrollossenbeforeunloadKlikDblClickmouseDownmouseUpmousemovemouseovermouseoutveranderingkiezenvoorleggentoets neertoets indrukkenkeyupfoutHet is duidelijk dat op basis van DOM-standaarden alleen bepaalde afhandelaars samenvallen met bepaalde elementen.
Naast deze lijst met standaardhandlers kunt u ook gebruikmaken van binden() om jQuery-handlers toe te voegen, bijvoorbeeld. MouseEnter en mouseLeave - evenals alle aangepaste handlers die u kunt maken.
Om standaard handlers of aangepaste handlers te verwijderen, geven we gewoon de ontbinden () methode de naam van de handler of de naam van de aangepaste handler die moet worden verwijderd - bijv. jQuery ( 'a'). ontbinden ( 'klik'). Als er geen parameters worden doorgegeven ontbinden (), het verwijdert alle handlers die aan een element zijn gekoppeld.
Deze concepten die zojuist zijn besproken, worden uitgedrukt in het codevoorbeeld hieronder.
Opmerkingen: jQuery biedt verschillende snelkoppelingen naar de binden() methode voor gebruik met alle standaard DOM-gebeurtenissen, waaronder aangepaste jQuery-evenementen zoals MouseEnter en mouseLeave. Als u deze sneltoetsen gebruikt, hoeft u alleen de naam van de gebeurtenis in te voeren als de naam van de methode, bijvoorbeeld. .Klik(), mouseout (), focus().
U kunt met jQuery onbeperkte handlers aan een enkel DOM-element koppelen.
jQuery biedt de een() event-afhandelingsmethode om gemakkelijk een gebeurtenis te binden aan DOM-elementen die eenmaal worden uitgevoerd en vervolgens worden verwijderd. De een() methode is gewoon een verpakking voor binden() en ontbinden ().
De syntaxis van de snelkoppeling - bijv. .Klik(), mouseout (), en focus() - voor het binden van een gebeurtenishandler aan een DOM-element kan ook worden gebruikt om handlers programmatisch aan te roepen. Om dit te doen, gebruikt u eenvoudigweg de snelkoppelingsgebeurtenismethode zonder een functie door te geven. In theorie betekent dit dat we een handler aan een DOM-element kunnen binden en vervolgens die handler onmiddellijk kunnen aanroepen. Hieronder demonstreer ik dit via de Klik() evenement.
Zeg gedag Zeg gedag
Opmerkingen: Het is ook mogelijk om het evenement te gebruiken op gang brengen() methode om specifieke handlers aan te roepen - bijv. jQuery ('a'). klik (functie () alert ('hi')). trigger ('klik'). Dit werkt ook met naamgepaste en aangepaste gebeurtenissen.
jQuery normaliseert het gebeurtenisobject volgens de W3C-normen. Dit betekent dat wanneer het gebeurtenisobject wordt doorgegeven aan een functiehandler, u zich geen zorgen hoeft te maken over browserspecifieke implementaties van het gebeurtenisobject (bijvoorbeeld Internet Explorer window.event). U kunt de volgende attributen en methoden van het gebeurtenisobject zorgeloos gebruiken van browserverschillen, omdat jQuery het gebeurtenisobject normaliseert.
Event.typeevent.targetevent.dataevent.relatedTargetevent.currentTargetevent.pageXevent.pageYevent.resultevent.timeStampevent.preventDefault ()event.isDefaultPrevented ()event.stopPropagation ()event.isPropagationStopped ()Event.stopImmediatePropagation ()event.isImmediatePropagationStopped ()Om toegang te krijgen tot het genormaliseerde jQuery-gebeurtenisobject, geeft u eenvoudig de anonieme functie door, wordt deze doorgegeven aan een jQuery-gebeurtenismethode, een parameter met de naam "gebeurtenis" (of hoe u hem ook wilt noemen). Voer vervolgens, binnen de anonieme callback-functie, de parameter in om toegang te krijgen tot het gebeurtenisobject. Hieronder is een gecodeerd voorbeeld van dit concept.
Vaak hebben we een object in de DOM dat verschillende functies gekoppeld moet hebben aan een enkele gebeurtenishandler. Laten we bijvoorbeeld de handlanger van formaat nemen. Met behulp van jQuery kunnen we zoveel functies toevoegen aan de window.resize handler zoals we willen. Maar wat gebeurt er als we slechts één van deze functies moeten verwijderen, maar niet allemaal? Als we gebruiken $ (Venster) .unbind ( 'resize'), alle functies gekoppeld aan de window.resize handler zal worden verwijderd. Door een manager een naam te geven (bijv. resize.unique), kunnen we een unieke haak toewijzen aan een specifieke functie voor verwijdering.
In de bovenstaande code voegen we twee functies toe aan de handlanger voor het wijzigen van de grootte. De tweede (documentvolgorde) grootte van de toegevoegde gebeurtenis maakt gebruik van event namespacing en verwijdert deze gebeurtenis onmiddellijk met behulp van ontbinden (). Ik heb dit gedaan om te benadrukken dat de eerste functie niet is verwijderd. Namespacing-events geven ons de mogelijkheid om unieke functies die zijn toegewezen aan dezelfde handler op een enkel DOM-element te labelen en te verwijderen.
Naast het ontkoppelen van een specifieke functie die is gekoppeld aan een enkel DOM-element en -handler, kunnen we ook event namespacing gebruiken om exclusief aan te roepen (met behulp van op gang brengen()) een specifieke handler en functie gekoppeld aan een DOM-element. In de onderstaande code worden twee klikgebeurtenissen toegevoegd , en vervolgens met namespacing, wordt er maar één aangeroepen.
Klik
Opmerkingen: Er is geen limiet voor de diepte of het aantal gebruikte naamruimten - bijv. resize.layout.headerFooterContent.
Namespacing is een geweldige manier om exclusieve handlers die een plug-in nodig heeft te beschermen, aan te roepen en te verwijderen.
Namespacing werkt met aangepaste gebeurtenissen evenals standaardgebeurtenissen - bijv. click.unique of myclick.unique.
Afvaardiging van evenementen is afhankelijk van gebeurtenispropagatie (a.k.a. borrelen). Wanneer u op een klikt binnenkant van een , welke binnen een is naar de naar de
Dit betekent dat we een klikgebeurtenis koppelen aan een dat is ingekapseld in de event.target) om vast te stellen welk element in de DOM het borrelen van het evenement feitelijk heeft veroorzaakt. Nogmaals, dit zal ons een verwijzing geven naar het element dat het borrelen heeft gestart.
Door dit te doen, kunnen we een gebeurtenishandler toevoegen aan een groot aantal DOM-elementen met slechts een enkele gebeurtenishandler / -verklaring. Dit is buitengewoon handig; een tabel met 500 rijen waarbij elke rij een klikgebeurtenis vereist, kan bijvoorbeeld gebruikmaken van gebeurtenisafvaardiging. Bestudeer de onderstaande code voor verduidelijking.
Nu, als u letterlijk op een van de daadwerkelijke kogels van de lijst zou klikken en niet op de koppeling zelf, raad eens? U zult uiteindelijk de event.target is de , niet de . Aangezien dit het geval is, is de ouder() methode zal de wanneer er vanuit een wordt geklikt door de ouder() methode een element uitdrukking.
$ (Event.target) .parent ( 'li') te verwijderen ().;
Het belangrijke punt hier is dat je zorgvuldig moet beheren waarop wordt geklikt wanneer het klikbare gebied meerdere ingekapselde elementen bevat, omdat je nooit weet waar de gebruiker precies op kan klikken. Daarom moet u controleren of de klik heeft plaatsgevonden vanaf het element dat u verwachtte.
Het handige gebruiken leven() gebeurtenismethode kunt u handlers binden aan DOM-elementen die zich momenteel in een webpagina bevinden en die nog moeten worden toegevoegd. De leven() methode maakt gebruik van gebeurtenisoverleg om ervoor te zorgen dat nieuw toegevoegde / gemaakte DOM-elementen altijd reageren op gebeurtenishandlers, ongeacht DOM-manipulaties of dynamische wijzigingen in de DOM. Gebruik makend van leven() is in wezen een snelkoppeling voor het handmatig instellen van gebeurtenisdelegatie. Gebruik bijvoorbeeld leven() we kunnen een knop maken die voor onbepaalde tijd een andere knop maakt.
Na het bestuderen van de code, zou het duidelijk moeten zijn dat we het gebruiken leven() om event delegation toe te passen op een bovenliggend element ( element in het codevoorbeeld), zodat elk knopelement dat aan de DOM wordt toegevoegd, altijd reageert op de klikhandler.
Om het live-evenement te verwijderen, gebruiken we eenvoudigweg het dood gaan() -methode b.v.. $ ( 'Button'). Sterven ().
Het concept om mee te nemen is het leven() methode kan worden gebruikt om gebeurtenissen aan DOM-elementen te koppelen die worden verwijderd en toegevoegd met behulp van AJAX. Op deze manier zou u afzien van het opnieuw koppelen van gebeurtenissen aan nieuwe elementen die in de DOM zijn geïntroduceerd na het laden van de eerste pagina.
Opmerkingen: leven() ondersteunt de volgende afhandelaars: Klik, DblClick, mouseDown, mouseUp, mousemove, mouseover, mouseout, toets neer, toets indrukken, keyup.
leven() werkt alleen tegen een selector.
leven() standaard stopt de propagatie met behulp van return false binnen de functie verzonden naar de leven() methode.
Het is mogelijk om het evenement te passeren binden() methode verschillende event handlers. Dit maakt het mogelijk om dezelfde functie, eenmaal geschreven, aan veel handlers te koppelen. In het onderstaande codevoorbeeld voegen we een enkele anonieme callback-functie toe aan de gebeurtenishandlers voor klikken, intoetsen en formaat wijzigen in het document.
Wanneer op een link wordt geklikt of een formulier wordt verzonden, roept de browser de standaardfunctionaliteit aan die is gekoppeld aan deze gebeurtenissen. Klik bijvoorbeeld op een link en de webbrowser zal proberen de waarde van de href attribuut in het huidige browservenster. Om de browser te stoppen van het uitvoeren van dit soort functionaliteit, kunt u de voorkom standaard() methode van het jQuery genormaliseerd gebeurtenisobject.
jQuery
Gebeurtenissen propageren (a.k.a. bubble) door de DOM. Wanneer een gebeurtenishandler wordt afgevuurd voor een gegeven element, wordt de aangeroepen gebeurtenishandler ook aangeroepen voor alle voorouderelementen. Dit standaardgedrag faciliteert oplossingen zoals gebeurtenisafvaardiging. Om deze standaard bubbling te verbieden, kunt u de jQuery genormaliseerde event-methode gebruiken stopPropagation ().
hou op
In het codevoorbeeld hierboven is de gebeurtenishandler gekoppeld aan de Valse teruggeven - bijv. Als u commentaar zou willen geven op het Met jQuery hebt u de mogelijkheid om uw eigen aangepaste evenementen te produceren met behulp van de Omdat deze gebeurtenissen gewoon zijn en niet bekend bij de browser, is de enige manier om aangepaste gebeurtenissen aan te roepen, ze programmatisch te activeren met behulp van jQuery Standaard klonen DOM-structuren met behulp van de Door een Het is vaak nodig om de X- en Y-coördinaten van de muisaanwijzer te krijgen ten opzichte van een ander element dan het kijkvenster of het gehele document. Dit gebeurt meestal met ToolTips, waarbij de tooltip wordt getoond ten opzichte van de locatie waar de muis zweeft. Dit kan eenvoudig worden bereikt door de offset van het relatieve element van de X- en Y-muiscoördinaten van de viewport af te trekken.
Standaardgedrag en gebeurtenisvermeerdering annuleren Via
return false return false - is het equivalent van het gebruik van beide voorkom standaard() en stopPropagation (). Klik hier return false verklaring in de bovenstaande code, alert () zou worden aangeroepen omdat de browser standaard de waarde van de href. Ook zou de pagina naar jQuery.com navigeren als gevolg van het borrelen van gebeurtenissen.
Aangepaste gebeurtenissen maken en deze triggeren via trigger ()
binden() methode. Dit wordt gedaan door het binden() methode met een unieke naam voor een aangepaste gebeurtenis.op gang brengen() methode. Bekijk de onderstaande code voor een voorbeeld van een aangepaste gebeurtenis die wordt aangeroepen met op gang brengen().
Klonen van gebeurtenissen evenals DOM-elementen
clone () methode niet aanvullend de gebeurtenissen gekloond die zijn gekoppeld aan de DOM-elementen die worden gekloond. Om de elementen en de gebeurtenissen die aan de elementen zijn gehecht te klonen, moet je de clone () methode een Booleaanse waarde van waar. Voeg nog een link toe
X- en Y-coördinaten van de muis in de viewport krijgen
mousemove gebeurtenis naar de hele pagina (document), kunt u de X- en Y-coördinaten van de muisaanwijzer ophalen terwijl deze zich binnen in het venster over het canvas beweegt. Dit wordt gedaan door het ophalen van de PageY en pageX eigenschappen van het jQuery genormaliseerd gebeurtenisobject.
X- en Y-coördinaten van de muis krijgen ten opzichte van een ander element
