Innholdsfortegnelse
Siden versjon 1.7 av jQuery har vi on () -metoden, som gir oss all nødvendig funksjonalitet for å administrere hendelser. Takket være denne metoden trenger vi ikke lenger den gamle bindingen (), live () eller delegaten (), men vi trenger heller ikke uskarphet (), fokus (), klikk (), svever () og andre.
Akkurat som det er på (), har vi det motsatte, av (), som fjerner hendelsene som er tildelt med ().
Vi kommer til å se en serie eksempler for bedre å forstå metoden on ().
Anta at vi ønsker å utføre en funksjon når du klikker på en knapp:
(funksjon () {$ ('knapp'). klikk (funksjon () {// kode for å utføre});}) ();Det er som om vi tradisjonelt ville gjort det med klikk (). Men hvis vi ser på jQuery -koden, vil vi se at det som faktisk skjer er at metoden on () blir kalt, så det raskeste er å gjøre:
(function () {$ ('button'). on ('click', function () {// code to execute});}) ();Dette er den mest direkte ruten. Og det samme for andre metoder som endring (), svever (), mouseenter (), etc … (faktisk svever () det det gjør er å kalle mouseenter () og museleave () som igjen kaller on () -metoden
La oss se på jQuery. Hvis vi laster ned versjon 1.7 eller nyere og ser på koden, ser vi følgende:
jQuery.each (("uskarphet fokus i fokusutmatingsbelastning endre størrelse rull bla ned klikk dblclick med musen nedover musen flytte musen over musen ut musen i musen forlate endre velg send inn tastetrykk tastetrykk feil kontekstmeny"). split (""), f funksjon (i, navn) {// Håndter hendelsesbinding jQuery.fn [navn] = funksjon (data, fn) {if (fn == null) {fn = data; data = null;} returner argumenter.lengde -> 0? This.on (navn, null, data, fn): this.trigger (navn);};Herfra er vi bare interessert i å se at metodene "uskarpe, fokusere, fokusere, fokusere, laste inn, endre størrelse, bla, laste ut, klikk, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, send inn, tastatur, tastetrykk, tast, feil og kontekstmeny "på slutten ender alle i" this.on (navn, null, data, fn) ".
bind (), live () og delegere ()
Tidligere ble det også gjort:
(funksjon () {$ ('knapp'). bind ('klikk', funksjon () {// kode som skal utføres når du klikker på knappen});}) ();Eller hvis vi ønsket at arrangementet skulle fungere selv etter å ha lagt til nye "knappelementer" i dokumentet, ville vi bruke live () -metoden:
(funksjon () {$ ('knapp'). live ('klikk', funksjon () {// kode som skal utføres når du klikker på knappen});}) ();Deretter introduserte jQuery "delegate ()", som tillot oss å tilordne en hendelse til en kontekst. For eksempel, hvis knappen er (eller blir, hvis den legges til senere) inne i en div med klassen "container":
(function () {$ ('div.container'). delegate ('knapp', 'klikk', funksjon () {// kode som skal utføres når du klikker på knappen});}) ();Men som med de forrige, binder (), live () eller delegerer () alt de gjør er å kalle on () -metoden.Likte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng
