Innehållsförteckning
Sedan version 1.7 av jQuery har vi on () -metoden, som erbjuder oss all nödvändig funktionalitet för att hantera händelser. Tack vare denna metod behöver vi inte längre den gamla bindningen (), live () eller delegaten (), men vi behöver inte heller oskärpa (), fokus (), klicka (), sväva () och andra.
Precis som det finns on (), har vi dess motsats, off (), vilket tar bort händelserna som tilldelas on ().
Vi kommer att se en serie exempel för att bättre förstå on () -metoden.
Antag att vi vill köra en funktion när du klickar på en knapp:
(funktion () {$ ('knapp'). klicka (funktion () {// kod att köra});}) ();Det är som om vi traditionellt skulle göra det med klick (). Men om vi tittar på jQuery -koden kommer vi att se att det som faktiskt händer är att on () -metoden kallas, så det snabbaste är att göra:
(function () {$ ('button'). on ('click', function () {// code to execute});}) ();Detta är den mest direkta vägen. Och samma för andra metoder som change (), hover (), mouseenter (), etc … (faktiskt svävar () vad det gör är att kalla mouseenter () och museleave () som i sin tur kallar on () -metoden
Låt oss titta på jQuery. Om vi laddar ner version 1.7 eller högre och tittar på dess kod ser vi följande:
jQuery.each (("oskärpa fokus i fokusutmatning ladda storleksanpassa rulla lossa klicka på dblklicka med musen ner musen flytta musen över musen ut musen i musen lämna ändra välj skicka in tangent nedtryckning tangent upp fel kontextmeny"). split (""), f funktion (i, namn) {// Hantera händelsebindning jQuery.fn [namn] = funktion (data, fn) {if (fn == null) {fn = data; data = null;} returnera argument.length -> 0? This.on (namn, null, data, fn): this.trigger (namn);};Härifrån är vi bara intresserade av att se att metoderna ”oskärpa, fokusera, fokusera, fokusera ut, ladda, ändra storlek, rulla, lossa, klicka, dblclick, mus ned, mus upp, mus flytta, mouseover, mouseout, mouseenter, musblad, ändra, välj, skicka, knappnedladdning, knapptryckning, knapp, fel och snabbmeny "i slutet alla slutar i" this.on (namn, null, data, fn) ".
bind (), live () och delegera ()
Tidigare gjordes det också:
(function () {$ ('button'). bind ('click', function () {// code to execute when click is clicked));}) ();Eller om vi ville att evenemanget skulle fungera även efter att vi lagt till nya "knapp" -element i dokumentet så skulle vi använda live () -metoden:
(function () {$ ('button'). live ('click', function () {// code to execute when button is clicked});}) ();Därefter introducerade jQuery "delegate ()", vilket gjorde att vi kunde tilldela en händelse ett sammanhang. Till exempel om knappen är (eller kommer att vara, om den läggs till senare) i en div med klassen "container":
(function () {$ ('div.container'). delegate ('button', 'click', function () {// code to execute when button is clicked});}) ();Men som med de föregående, både binda (), leva () eller delegera () allt de gör är att kalla på () -metoden.Gillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng
