Indholdsfortegnelse
Siden version 1.7 af jQuery har vi on () -metoden, som giver os al den nødvendige funktionalitet til at styre begivenheder. Takket være denne metode har vi ikke længere brug for den gamle bind (), live () eller delegeret (), men vi har heller ikke brug for sløring (), fokus (), klik (), svæve () og andre.
Ligesom der er on (), har vi dens modsætning, off (), som fjerner de begivenheder, der er tildelt med on ().
Vi kommer til at se en række eksempler for bedre at forstå on () -metoden.
Antag, at vi vil udføre en funktion, når der klikkes på en knap:
(funktion () {$ ('knap'). klik (funktion () {// kode, der skal udføres});}) ();Det er som om vi traditionelt ville gøre det med klik (). Men hvis vi ser på jQuery -koden, vil vi se, at det, der rent faktisk sker, er, at on () -metoden kaldes, så den hurtigste ting er at gøre:
(funktion () {$ ('knap'). på ('klik', funktion () {// kode, der skal udføres});}) ();Dette er den mest direkte rute. Og det samme for andre metoder som f.eks. Change (), hover (), mouseenter () osv … (faktisk svæver (), hvad det gør er at kalde mouseenter () og museleave (), som igen kalder on () -metoden
Lad os se på jQuery. Hvis vi downloader version 1.7 eller nyere og ser på dens kode, ser vi følgende:
jQuery.each (("blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select send keydown keypress keyup error contextmenu"). split (""), f funktion (i, navn) {// Håndter hændelsesbinding jQuery.fn [navn] = funktion (data, fn) {hvis (fn == null) {fn = data; data = null;} returner argumenter.længde -> 0? This.on (navn, null, data, fn): this.trigger (navn);};Herfra er vi kun interesserede i at se, at metoderne "sløring, fokus, fokus, fokus, indlæsning, ændring af størrelse, rulning, aflæsning, klik, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, send, keydown, tastetryk, tastatur, fejl og kontekstmenu "i slutningen ender alle i" this.on (navn, null, data, fn) ".
bind (), live () og delegere ()
Tidligere blev det også gjort:
(funktion () {$ ('knap'). bind ('klik', funktion () {// kode, der skal udføres, når der klikkes på knappen});}) ();Eller hvis vi ville have, at begivenheden skulle fungere, selv efter at vi havde tilføjet nye "knap" -elementer til dokumentet, ville vi bruge metoden live ():
(funktion () {$ ('knap'). live ('klik', funktion () {// kode, der skal udføres, når der klikkes på knappen});}) ();Efterfølgende introducerede jQuery "delegate ()", som tillod os at tildele en begivenhed til en kontekst. For eksempel, hvis knappen er (eller vil være, hvis den tilføjes senere) inde i en div med klassen "container":
(funktion () {$ ('div.container'). delegere ('knap', 'klik', funktion () {// kode, der skal udføres, når der klikkes på knappen});}) ();Men som med de foregående, både binder (), lever () eller delegerer () alt, hvad de gør, er at kalde on () -metoden.Kan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt
