Spisie treści
Od wersji 1.7 jQuery mamy metodę on(), która oferuje nam całą niezbędną funkcjonalność do zarządzania zdarzeniami. Dzięki tej metodzie nie potrzebujemy już starego bind(), live() czy delegate(), ale też nie potrzebujemy blur(), focus(), click(), hover() i innych.
Podobnie jak w przypadku on (), mamy jego przeciwieństwo, off (), które usuwa zdarzenia przypisane do on ().
Zobaczymy serię przykładów, aby lepiej zrozumieć metodę on ().
Załóżmy, że chcemy wykonać funkcję po kliknięciu przycisku:
(funkcja () {$ ('przycisk'). kliknij (funkcja () {// kod do wykonania});}) ();To tak, jakbyśmy tradycyjnie robili to za pomocą kliknięcia (). Ale jeśli spojrzymy na kod jQuery, zobaczymy, że tak naprawdę jest wywoływana metoda on(), więc najszybszą rzeczą jest zrobienie:
(funkcja () {$ ('przycisk'). on ('klik', funkcja () {// kod do wykonania});}) ();To najbardziej bezpośrednia trasa. I to samo dla innych metod, takich jak change(), hover(), mouseenter() itp. (właściwie hover() to wywołuje mouseenter() i mouseleave(), które z kolei wywołują metodę on()
Spójrzmy na jQuery. Jeśli pobierzemy wersję 1.7 lub wyższą i spojrzymy na jej kod, zobaczymy co następuje:
jQuery.each (("rozmycie ostrości focusin focusout obciążenie zmiana rozmiaru przewijanie wyładowanie kliknij dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave zmiana zaznacz prześlij klawisze w dół klawisze klawisze błąd menu kontekstowego"). split (""), funkcja f (i, nazwa) {// Obsługa wiązania zdarzenia jQuery.fn [nazwa] = function (data, fn) {if (fn == null) {fn = data; data = null;} return arguments.length -> 0? This.on (nazwa, null, dane, fn): this.trigger (nazwa);};Od tego momentu interesuje nas tylko to, że metody „rozmycie, skupienie, skupienie, wyostrzenie, ładowanie, zmiana rozmiaru, przewijanie, rozładowywanie, kliknięcie, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error i contextmenu "na końcu wszystkie kończą się" this.on (name, null, data, fn) ".
powiąż (), na żywo () i deleguj ()
W przeszłości robiono to również:
(funkcja () {$ ('przycisk'). bind ('klik', funkcja () {// kod do wykonania po kliknięciu przycisku});}) ();Lub gdybyśmy chcieli, aby zdarzenie zadziałało nawet po dodaniu nowych elementów „button” do dokumentu, skorzystalibyśmy z metody live():
(funkcja () {$ ('przycisk'). live ('klik', funkcja () {// kod do wykonania po kliknięciu przycisku});}) ();Następnie jQuery wprowadziło „delegate()”, co pozwoliło nam przypisać zdarzenie do kontekstu. Na przykład, jeśli przycisk znajduje się (lub będzie, jeśli zostanie dodany później) wewnątrz elementu div z klasą „kontener”:
(funkcja () {$ ('div.container'). delegate ('przycisk', 'klik', funkcja () {// kod do wykonania po kliknięciu przycisku});}) ();Ale tak jak w przypadku poprzednich, zarówno bind(), live() jak i delegate() wywołują jedynie metodę on().Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt
