Share
Webpagina's zijn voor het grootste deel gebeurtenisgestuurd. Bibliotheken zoals jQuery hebben hulpmethoden geboden om deze functionaliteit veel gemakkelijker te begrijpen te maken. In deze zelfstudie zullen we kijken naar het uitbreiden van deze methoden om uw eigen aangepaste naamgepaste gebeurtenissen te maken.
Vóór de luxe van JavaScript-bibliotheken, als u een eenvoudige klikgebeurtenis aan een element wilde toevoegen, moest u het volgende doen om alle browsers te ondersteunen:
Accentsconagua
var elt = document.getElementById ("# myBtn"); if (elt.addEventListener) elt.addEventListener ("klik", functie () alert ('button clicked');); else if (elt.attachEvent) elt.attachEvent ("onclick", functie () alert ('button clicked');); else elt.onclick = function () alert ('button clicked'); ; JavaScript-bibliotheken worden nu geleverd met hulpmethoden om het beheer van gebeurtenissen overzichtelijker te maken. Bijvoorbeeld, het bovenstaande doen in jQuery is veel meer gecomprimeerd.
$ ("# myBtn"). klik (functie () alert ('button clicked');); Ongeacht uw implementatie, zijn er drie belangrijke onderdelen voor evenementen:
In onze klikgebeurtenis aan het begin van de zelfstudie, is de luisteraar de klikgebeurtenis die wacht tot het #myBtn-element wordt aangeklikt. Wanneer op het element #myBtn wordt geklikt, wordt de handler verzonden en geactiveerd. wat in dit geval een anonieme functie is om het waarschuwingsbericht () weer te geven.
Met jQuery kunnen we een stap verder gaan en onze eigen aangepaste evenementen maken. In deze zelfstudie gebruiken we een ongeordende lijst van een lijstvermelding en voegen we functionaliteit toe via aangepaste gebeurtenissen die mappen samenvouwen en uitbreiden. Laten we beginnen met onze basispaginastructuur die in de komende voorbeelden zal worden gebruikt.
Aangepaste jQuery-gebeurtenissen
Hier maken we een eenvoudige directorylijst met een ongeordende lijst. We hebben jQuery van de Google JSAPI CDN opgenomen en addIcons () genoemd, die afbeeldingen van elk bestand en elke map toevoegt, afhankelijk van de bestandsextensie die wordt weergegeven. Deze functie is puur voor esthetische doeleinden. Het is niet nodig voor een van de aangepaste gebeurteniscodes die we gaan implementeren. Het resultaat van deze stap en kan hier worden bekeken.
Voordat we beginnen met het toevoegen van gebeurtenissen aan ons voorbeeld van een directoryvermelding, moeten we begrijpen hoe .bind () en .trigger () werken. We gebruiken bind () om een afspraak te koppelen aan alle overeenkomende elementen die zich momenteel op de pagina bevinden. Gebruik vervolgens .trigger () wanneer u de gebeurtenis wilt verzenden. Laten we een snel voorbeeld bekijken.
$ ("# myBtn"). bind ("klik", functie (evt) alert ('button clicked');); $ ( "# MyBtn") trekker ( "klik").; In de bovenstaande code verschijnt er een waarschuwingsbericht wanneer op het element met een ID van 'myBtn' wordt geklikt. Bovendien activeert onze trigger () de klikgebeurtenis onmiddellijk wanneer de pagina wordt geladen. Houd er rekening mee dat bind () is hoe u een afspraak toevoegt. Terwijl u .trigger () gebruikt, dwingt u de gebeurtenis die moet worden verzonden en voert u de handler van de gebeurtenis uit.
De methode .bind () is niet alleen beperkt tot browsergeschiedenis, maar kan ook worden gebruikt om uw eigen aangepaste gebeurtenissen te implementeren. Laten we beginnen met het maken van aangepaste evenementen met de naam ineenstorting en uitbreiden voor ons voorbeeld van de directorylijst.
Laten we eerst een binden ineenstorting evenement voor alle mappen weergegeven in onze ongeordende lijst.
$ ("# tree li: parent"). bind ("collapse", function (evt) Hier vinden we alle elementen die ouders zijn en de gebeurtenisnaam doorgeven ineenstorting in de .bind () -methode. We hebben ook de eerste parameter genoemd evt, die het jQuery-gebeurtenisobject voorstelt.
.. $ (Evt.target) .children () slideUp () end () addClass ( "ingestort.");
Nu selecteren we het doelwit van het evenement en schuiven alle kinderen omhoog. Bovendien hadden we een CSS-klasse ingestort naar ons directory-element.
). bind ("expand", function (evt) We ketenen evenementen en verbinden onze uitbreiden evenement op deze lijn.
$ (Evt.target) .children () slideDown () end () removeClass ( "ingestort")...; );
Precies het tegenovergestelde van onze ineenstorting event handler, in de uitbreiden event handler we schuiven alle kinderen elementen van de map elementen naar beneden en verwijderen de klasse ingestort van ons doelelement. Alles bij elkaar.
$ ("# tree li: parent"). bind ("collapse", function (evt) $ (evt.target) .children (). slideUp (). end (). addClass ("ingeklapt");) .bind ("expand", function (evt) $ (evt.target) .children (). slideDown (). end (). removeClass ("ineengevouwen");); Alleen deze code alleen zal niets voor ons doen vanwege de gebeurtenissen ineenstorting en uitbreiden zijn onbekend en hebben geen idee wanneer ze moeten worden verzonden. Daarom voegen we onze .trigger () -methode toe wanneer we willen dat deze gebeurtenissen worden geactiveerd.
$ ("# tree li: parent"). bind ("collapse", function (evt) $ (evt.target) .children (). slideUp (). end (). addClass ("ingeklapt");) .bind ("expand", function (evt) $ (evt.target) .children (). slideDown (). end (). removeClass ("collapsed");)). toggle (function () // schakelen tussen $ (this) .trigger ("collapse");, function () $ (this) .trigger ("expand");); Als we deze code uitvoeren, zullen onze mappen nu schakelen tussen het activeren van de ineenstorting en uitbreiden evenement. Maar als u op een geneste map klikt, ziet u dat onze evenementen meerdere keren per klik worden geactiveerd. Dit komt door het borrelen van gebeurtenissen.
Wanneer u op een element op een pagina klikt, wordt de gebeurtenis verplaatst, of wordt vastgelegd, van de bovenste bovenliggende persoon waaraan een gebeurtenis is gekoppeld aan het beoogde doel. Vervolgens blaast het vanuit het beoogde doel terug naar de bovenste bovenliggende.
Als we bijvoorbeeld op de css / map klikken, wordt onze gebeurtenis vastgelegd via root /, assets / en vervolgens css /. Vervolgens wordt css /, assets /, gebubbeld en vervolgens naar root /. Daarom wordt de handler drie keer geëxecuteerd. We kunnen dit corrigeren door een eenvoudige voorwaarde toe te voegen in de handler voor het beoogde doelwit.
if (evt.target == evt.currentTarget) (evt.target) .children (). slideUp (). end (). addClass ("samengevouwen"); Met deze code wordt elk huidig doelwit van de gebeurtenis vergeleken met het beoogde doel of currentTarget. Wanneer we een overeenkomst hebben, zal alleen het script de samenvouwgebeurtenis uitvoeren. Na het updaten van beide ineenstorting en uitbreiden gebeurtenis onze pagina zal functioneren zoals verwacht.
Een naamruimte biedt context voor evenementen. De aangepaste evenementen, ineenstorting en uitbreiden, zijn dubbelzinnig. Het toevoegen van een naamruimte aan een aangepaste jQuery-gebeurtenis is gestructureerd evenement naam gevolgd door de namespace. We zullen onze naamruimte TreeEvent maken, omdat onze evenementen de acties en functionaliteit van een boomomslagstructuur vertegenwoordigen. Zodra we de naamruimten hebben toegevoegd aan onze evenementen, ziet de code er nu zo uit:
$ ("# tree li: parent"). bind ("collapse.TreeEvent", functie (evt) if (evt.target == evt.currentTarget) $ (evt.target) .children (). slideUp () .end (). addClass ("ingeklapt");). bind ("expand.TreeEvent", functie (evt) if (evt.target == evt.currentTarget) $ (evt.target) .children ( ) .slideDown (). end (). removeClass ("ingeklapt");). toggle (function () $ (this) .trigger ("collapse.TreeEvent");, function () $ (this ) .trigger ("expand.TreeEvent");); Alles wat we nodig hadden om te veranderen waren de namen van de gebeurtenissen in de methoden .bind () en .trigger () voor beide ineenstorting en uitbreiden evenementen. We hebben nu een functioneel voorbeeld met aangepaste naamgepakte gebeurtenissen.
Opmerking: we kunnen gebeurtenissen eenvoudig uit elementen verwijderen door de methode unbind () te gebruiken.
$ ("# tree li: parent"). unbind ("collapse.TreeEvent"); // verwijder gewoon de instortingevent $ ("# tree li: parent"). unbind (". TreeEvent"); // verwijder alle gebeurtenissen onder de TreeEvent-naamruimte Een andere manier om een aangepaste gebeurtenis in jQuery in te stellen, is gebruik te maken van de Special Events API. Er is niet veel documentatie over deze API, maar Brandom Aaron, een belangrijke bijdrager van jQuery, heeft twee uitstekende blogberichten geschreven (http://brandonaaron.net/blog/2009/03/26/special-events en http: / /brandonaaron.net/blog/2009/06/4/jquery-edge-new-special-event-hooks) om ons te helpen de beschikbare methoden te begrijpen. Hieronder volgt een korte uitleg van de methoden.
Laten we nu kijken naar hoe we onze aangepaste evenementen kunnen combineren in een speciaal evenement dat we zullen noemen toggleCollapse.
jQuery.event.special.toggleCollapse = setup: function (data, namespaces) for (var i in namespaces) if (namespaces [i] == "TreeEvent") jQuery (this). bind ('klik', jQuery.event.special.toggleCollapse.TreeEvent.handler); , teardown: function (namespaces) for (var i in namespaces) if (namespaces [i] == "TreeEvent") jQuery (this) .unbind ('click', jQuery.event.special.toggleCollapse .TreeEvent.handler); , TreeEvent: handler: function (event) if (event.target == event.currentTarget) var elt = jQuery (this); var cssClass = "samengevouwen"; if (elt.hasClass (cssClass)) elt.children (). slideDown (). end (). removeClass (cssClass); else elt.children (). slideUp (). end (). addClass (cssClass); event.type = "toggleCollapse"; jQuery.event.handle.apply (this, arguments); ; $ ("# tree li: parent"). bind ("toggleCollapse.TreeEvent", function (evt) ); Laten we het stuk voor stuk bekijken.
jQuery.event.special.toggleCollapse = setup: function (data, namespaces) for (var i in namespaces) if (namespaces [i] == "TreeEvent") jQuery (this). bind ('klik', jQuery.event.special.toggleCollapse.TreeEvent.handler); , De eerste regel jQuery.event.special.toggleCollapse maakt een nieuw speciaal evenement genaamd toggleCollapse. We hebben vervolgens onze installatiemethode, die itereert over alle naamruimten van deze gebeurtenis. Zodra het gevonden is TreeEvent, het bindt een klikgebeurtenis aan de overeenkomende elementen, die zullen callen jQuery.event.special.toggleCollapse.TreeEvent.handler zodra het evenement is ontslagen. Let op, we gebruiken een klikgebeurtenis in tegenstelling tot de toggle () -functie die we gebruikten met eariler. Dit komt omdat toggle () geen gebeurtenis is, maar een interactie-helperfunctie.
teardown: function (namespaces) for (var i in namespaces) if (namespaces [i] == "TreeEvent") jQuery (this) .unbind ('click', jQuery.event.special.toggleCollapse.TreeEvent.handler ); , Onze demonteermethode is vergelijkbaar met onze instellingsmethode, maar in plaats daarvan zullen we de klikgebeurtenis loskoppelen van alle overeenkomende elementen.
TreeEvent: handler: function (event) if (event.target == event.currentTarget) var elt = jQuery (this); var cssClass = "samengevouwen"; if (elt.hasClass (cssClass)) elt.children (). slideDown (). end (). removeClass (cssClass); else elt.children (). slideUp (). end (). addClass (cssClass); event.type = "toggleCollapse"; jQuery.event.handle.apply (this, arguments); ;
Hier gebruiken we de TreeEvent-naamruimte om de handler te abstraheren. In de handler schakelen we tussen een samenvouwen en een uitgevouwen status, afhankelijk van of het overeenkomende element de CSS-klasse "samengevouwen" bevat. Ten slotte hebben we het gebeurtenistype ingesteld op onze naam van ons evenement, toggleCollapse en gebruik de methode apply () die het callback-argument uitvoert wanneer we dit speciale evenement binden.
$ ("# tree li: parent"). bind ("toggleCollapse.TreeEvent", function (evt) ); Ten slotte binden we ons speciale evenement aan de directory's van onze directorylijst. Ons eindresultaat kan hier bekeken worden.
Hieronder staan enkele extra bronnen die u mogelijk handig vindt bij het werken met aangepaste evenementen. Bedankt voor het lezen!
