html hadisə girişi. Hadisələri formalaşdırmaq. jQuery - Siçan Hərəkəti Hadisəsi

Bu yazıda jQuery kitabxanasının hadisələri idarə etmək üçün veb tərtibatçısına təqdim etdiyi üsullara baxacağıq.

Hadisələrlə işləmək üçün JavaScript skriptləri brauzer API təmin edir (adEventListener funksiyası kimi). Bu funksiyadan istifadə edərək, göstərilən element üçün brauzer göstərilən hadisəni yaradacaq zaman yerinə yetiriləcək kodu təyin edə bilərsiniz.

Elementlərə hadisə idarəedicilərinin əlavə edilməsinə keçməzdən əvvəl bu elementlər əvvəlcə əldə edilməlidir. Səhifədə düzgün elementləri necə tapmağı öyrənmək üçün jQuery - Elementlərin seçilməsi məqaləsinə baxın.

jQuery-də siz on və one funksiyalarından, həmçinin stenoqramdan istifadə edərək hadisəni (hadisə dinləyicisini) konkret elementə asa bilərsiniz.

// .on-da funksiya (hadisələr, işləyici); // funksiya bir .bir(hadisələr, işləyici); // hadisələr - boşluqla ayrılmış hadisə və ya hadisələrin siyahısı, baş verdikdə işləyici (işləyici) // işləyici - funksiya (hadisə idarəedicisi) // .event( üzərində funksiya stenoqrafiyası işləyici); // hadisə - hadisənin adı (yalnız jQuery-də belə qısa qeydin yaradıldığı hadisələri emal etmək üçün istifadə edilə bilər)

One funksiyası on funksiyadan yalnız ona görə fərqlənir ki, o, göstərilən hadisə baş verdikdə işləyicini yalnız bir dəfə yerinə yetirir.

Məsələn, on funksiyasından istifadə edərək btn sinifli bütün elementlər üçün klik hadisəsi əlavə edək:

// işləyici kimi anonim funksiyadan istifadə $(".btn").on("klik", function() ( // hadisə baş verdikdə yerinə yetiriləcək hərəkətlər... console.log($(this). mətn( ); )); // işləyici kimi müntəzəm funksiyadan istifadə var myFunction = function() ( console.log($(this).text()); ) $(".btn").on("klik", myFunction);

Yuxarıdakı kod, on funksiyasının stenoqrafiyasından istifadə edərək yazılmışdır:

$(".btn").click(function() ( // hadisə baş verdikdə yerinə yetiriləcək hərəkətlər... console.log($(bu).text()); ));

Tədbiri idarə edərkən, bu barədə bəzi əlavə məlumatları öyrənə bilərsiniz. Bu məlumatı, yəni Event obyektini hadisə idarəçisinə ötürmək həmişə birinci arqument vasitəsilə həyata keçirilir.

$("#demo").on("click", function(e)( // e baş vermiş hadisə haqqında əlavə məlumatları ehtiva edən Hadisə obyektidir // Hadisə obyektinin tez-tez istifadə olunan xassələri e.preventDefault(); / /defolt olaraq hərəkəti ləğv edin e.stopPropagation(); //hadisənin daha da qabarmasını dayandırın // e.type - hadisə növünü əldə edin // e.target - hadisənin baş verdiyi elementə istinad // e. currentTarget - cari elementə istinad (hansı işləyici işə salınıb.) Bu xassə adətən bu funksiyaya bərabərdir. // e.currentTarget === bu // e.açar koddur (siçan üçün), düymə və ya simvol üçün kod (klaviatura üçün) //e.pageX, e.pageY – kursor koordinatları, sənədin yuxarı sol küncünə nisbətən ));

jQuery-də, hadisənin adını qeyd etdikdən sonra, isteğe bağlı olaraq ad sahəsi təyin edə bilərsiniz.

Misal üçün:

// ad məkanında əvvəlcə hadisəyə klikləyin $("#demo").on("click.first",function()( console.log("1 klik hadisəsi idarəedicisi"); )); // ikinci ad məkanında hadisəyə klikləyin $("#demo").on("click.second",function()( console.log("2 klik hadisəsi işləyicisi"); ));

Ad sahəsi çox lazımlı bir şeydir. O, məsələn, bütün hadisələri deyil, yalnız müəyyən bir adı olanları çağırmaq lazım olduqda istifadə olunur.

// ilk ad məkanında klik hadisəsini tetikleyin $("#demo").trigger("click.first"); // ikinci ad məkanında klik hadisəsini işə salın $("#demo").trigger("klik.second");

O, həmçinin müəyyən hadisələri silməyi çox asanlaşdırır:

//ilk ad məkanında klik hadisəsi işləyicilərini silin $("#demo").off("click.first"); //ikinci ad məkanında klik hadisəsi işləyicilərini çıxarın $("#demo").off("click.second");

Tətik və söndürmə funksiyalarından istifadənin təsviri və nümunələri bir az sonra məqalədə müzakirə olunur.

Lazım gələrsə, siz məlumatları hadisə idarəçisinə ötürə bilərsiniz (on funksiyasında əlavə arqument göstərməklə). İşləyici daxilində ötürülən məlumat Event obyekti vasitəsilə əldə edilir.

Bu belə işləyir (məsələn):

Məzmunu göstər 2 Məzmunu göstər ... $("#showContent1").on("klik", (başlıq:"Başlıq 1", məzmun: "Məzmun 1..."), funksiya(e)( var çıxış = ""+e.data.title+": " + e.data.content; $("#content").html(çıxış); )); $("#showContent2").on("klik", (başlıq:"Başlıq 2", məzmun: "Məzmun 2..."), funksiya(e)( var çıxış = ""+e.data.title+" : " + e.data.content; $("#content").html(çıxış); ));

Birdən çox (2 və ya daha çox) hadisə üçün bir işləyicidən istifadə nümunəsi:

$("#id").on("klaviaturaya basaraq bulanıqlığı dəyişmək", funksiya(e) ( console.log(e.type); // hadisə növü )); // və ya belə var myFunction = function() ( ... ) $("#id") .keyup(myFunction) .keypress(myFunction) .blur(myFunction) .change(myFunction);

Hər bir hadisənin öz funksiyası var:

$("#id").on(( mouseenter: function() ( // mouseenter hadisə idarəedicisi... ), mouseleave: function() ( // mouseleave hadisə idarəedicisi... ), klikləyin: function() ( / / hadisə idarəedicisinə klikləyin... )))

jQuery-də bir hadisə üçün bir neçə işləyicidən (funksiyalardan) istifadə nümunəsi:

$("#demo").click(function()( console.log("1 klik hadisəsi idarəedicisi"); )); $("#demo").click(function()( console.log("2 klik hadisəsi idarəedicisi"); ));

Məsələn, hadisələrin bu kimi hansı ardıcıllıqla icra olunacağını öyrənə bilərsiniz:

Var eventList = $._data($("#demo"), "hadisələr"); konsol jurnalı (hadisə siyahısı);

jQuery-də koddan hadisə çağırmaq üçün 2 üsul var:

• trigger - elementdə göstərilən hadisəni tetikler.
• triggerHandler - Hadisənin özünü tetiklemeden hadisə idarəçisinə zəng edir.

Bəzi elementə hadisə işləyicisinin əlavə edilməsi prosesi adətən səhifə yükləndikdən sonra həyata keçirilir, yəni. sənədin DOM ağacı artıq qurulduqda. Əks halda, işləyicilər yazarkən, hələ səhifədə olmayan elementlərə müraciət edə bilərsiniz.

jQuery-də səhifə yükləmə hadisəsi üçün ən qısa giriş belə görünür:

$(function()( // sənədi yüklədikdən sonra yerinə yetiriləcək hərəkətlər... ));

Ancaq daha uzun bir qeyddən istifadə edə bilərsiniz:

$(sənəd).ready(function()( // sənədi yüklədikdən sonra yerinə yetiriləcək hərəkətlər... ));

Brauzer element və onun bütün daxili elementləri tam yükləndikdə onun yükləmə hadisəsini işə salır. Bu hadisə yalnız URL olan elementlər üçündür: şəkil , skript , iframe və pəncərə .

Məsələn, səhifə tam yükləndikdə (şəkillər daxil olmaqla) funksiyanı yerinə yetirin:

$(window).on("load", function() ( // səhifə tam yükləndikdən sonra hərəkətlər... ));

Məsələn, göstərilən şəkil yükləndikdə konsola mesaj çap edin:

... $("#image").on("load", function() ( console.log("Şəkil yükləndi"); ));

JQuery-də siçan hərəkətlərini izləmək üçün aşağıdakı hadisələr ən çox istifadə olunur:

• siçan aşağı
• siçan
• basın
• siçan hərəkəti
• təkər
• hover
• siçan daxil
• siçan üzərində
• siçan yarpağı
• mauseout

Klik hadisəsi mürəkkəb hadisədir, siçan aşağı və siçan hərəkətləri işə salındıqdan sonra baş verir. Mousedown hadisəsi göstərici elementin üzərində olduqda və siçan düyməsini sıxdıqda baş verir. Mouseup hadisəsi göstərici elementin üzərində olduqda və siçan düyməsini buraxdıqda baş verir. Klik hadisəsi kursor elementin üzərində olduqda və siçan düyməsini sıxıb buraxdıqda işə salınır. Bu hadisələr istənilən qəbul edə bilər HTML elementi s.

Məsələn, pəncərə elementinin onclick hadisəsinə işləyici asaq. Bu hadisə baş verdikdə, işləyici basılan düymənin sayını və kursor koordinatlarını göstərəcək:

$(pəncərə).on("klik", funksiya(e) ( // klik hadisəsinin idarə edilməsi... console.log("Düymə basıldı: " + e.hansı); //1 - sol düymə, 2 - orta düymə, 3 - sağ düymə console.log("Kursor koordinatları: x = " + e.pageX + " ; y = " + e.pageY); )))

Məsələn, btn sinfi olan bütün elementlərə onclick hadisəsini asaq:

$(".btn").on("klik", funksiya()( // düyməni basan hadisə idarəedici kodu... )); Hadisə stenoqramını basın: $(".btn").click(function()( ... ));

Məsələn, klik hadisəsindən bir müddət sonra bloku necə gizlədə biləcəyinizi nəzərdən keçirək:

...5 saniyədən sonra bloku gizlədin... ... $(".hide-message").click(function(e)( e.preventDefault(); var _this = this; setTimeout(function()( $() _bu).yaxın(".mesaj").gizlət(); ), 5000); ));

Kursorun üzərinə sürüşmə hadisəsi mürəkkəbdir və 2 hadisədən ibarətdir:

• hadisələr (mouseenter, mouseover);
• tərk etmək (siçan yarpağı, siçan).

JQuery-də mouseenter və mouseleave hadisələri siçanın üzərinə dırmaşmaq və siçan çevirməkdən yalnız ona görə fərqlənir ki, kursor müvafiq olaraq elementin daxili elementlərinə daxil olduqda və onları tərk etdikdə onlar işə düşmür. Başqa sözlə, siçanın üzərinə hərəkət və siçan buraxma hadisələri qabarır, lakin siçan daxil etmə və siçan buraxma hadisələri bunu etmir.

Məsələn, siyahı elementinə kursor gətirildikdə onun rəngini dəyişək:

• Qələm
• Qələm
• Hökmdar

Eyni hərəkətlər, lakin siçan və siçan hərəkətindən istifadə etməklə:

$("ul>li"). mouseover(function()( // $(this) elementini daxil edərkən).css("color","orange"); )). mouseout(function()( // elementi tərk edərkən $(this).css("color","black"); ));

Bu üsulları birlikdə istifadə etmək lazım deyil, ayrı-ayrılıqda da istifadə edilə bilər.

Məsələn, hover hadisəsi baş verən zaman elementə edilən ziyarətlərin sayını hesablayaq:

Say: 0 ... $("#count").mouseenter(funksiya()( var count = parseInt($(this).find("span").text()); count++; $(bu).tap ("span").text(count); ));

Mouseenter və mouseleave istifadə etmək əvəzinə, hover hadisəsindən istifadə edə bilərsiniz.

Məsələn, yuxarıdakı nümunəni hoverdən istifadə edərək yenidən yazaq:

$("ul>li").hover(function()( // $(this) elementinə daxil olduqda).css("color","orange"); ), function()( // $ elementini tərk edərkən (bu).css("rəng","qara"); ));

JQuery-də hover hadisəsindən istifadə edərkən, kursor elementə daxil olduqda (mouseenter), ikinci işləyici isə elementdən çıxanda (mouseleave) nə baş verdiyini təyin etmək üçün birinci işləyicidən istifadə olunur.

Əgər hover hadisəsinə bir idarəçi versəniz, o, həm hoverlə işləmək, həm də siçanı tərk etmək üçün yerinə yetiriləcək.

Misal üçün:

$("h1").hover(function()( console.log("Hadisə baş verdi daxil edin/çıxın"); ));

Mousemove hadisəsi siçan göstəricisi onun daxilində hərəkət etdikdə elementə göndərilir. İstənilən HTML elementi bu hadisəni qəbul edə bilər.

$(".target").mousemove(funksiya(e) ( console.log("Mousemove hadisəsi üçün işləyici çağırılır."); console.log("Sənədin yuxarı sol küncünə nisbətən koordinatlar: " + e.pageX + ", " + e.pageY); console.log("Kursor hədəf daxilində koordinatlar: " + e.offsetX + ", " + e.offsetY); ));

Siçan təkərinin sürüşdürülməsi hadisəsini dinləmək bu şəkildə edilə bilər:

$(window).on("təkər", funksiya(e) ( // işləyici kodu (məsələn)... console.log("Sürüşdürülmüş piksellərin sayı: " + e.originalEvent.deltaY); əgər (e. orijinal Hadisə. deltaY< 0){ console.log("Прокручиваем вверх"); } else { console.log("Прокручиваем вниз"); } });

Bu hadisə, sürüşdürmədən fərqli olaraq, brauzer tərəfindən yalnız siçan çarxı üçün yaradılır və elementin sürüşdürülməsi və ya olmamasının əhəmiyyəti yoxdur, yəni. o, gizli təyin edilmiş daşqın elementləri üzərində işləyə bilər. Digər fərq ondan ibarətdir ki, təkər sürüşmədən əvvəl, sürüşmə isə ondan sonra yaradılır.

Klaviatura düyməsini basdıqda, brauzer hadisələri aşağıdakı ardıcıllıqla yaradır:

Klaviatura -> Klaviatura -> Klaviatura

• keydown (düymə basılıb, lakin hələ buraxılmayıb);
• düyməyə basmaq (nəzarət düymələri istisna olmaqla, hərflər, rəqəmlər və digər düymələr üçün hadisə yaradılır) – simvol kodunu əldə etmək üçün nəzərdə tutulmuşdur (klaviaturanın aşağı salınması və düymələrin yığılması hadisələri yalnız açar kodu haqqında məlumat əldə etməyə imkan verir, lakin simvolu deyil);
• keyup (açar buraxıldıqda brauzer tərəfindən yaradılır).

Məsələn, düymə basıldıqda baş verən bütün hadisələri dinləmək üçün işləyici yazaq:

... $("#target").on("klaviatura düyməsinə basmaq düymələri", funksiya(e) ( console.log("Tədbir növü: " + e.type); // düymələri basmaq, düymələrə basmaq, düymələri yığmaq console.log( "Basılan düymənin və ya simvolun kodu: " + e.hansı); // simvol kodu yalnız düyməni basmağa imkan verir console.log("Basılmışdır Alt düyməsi: " + e.altKey); console.log("Ctrl düyməsi basıldı: " + e.ctrlKey); console.log("Shift düyməsi basıldı: " + e.shiftKey); console.log("Cmd düyməsi basıldı (osMac) ): " + e.metaKey); ));

Klavişə basma hadisəsini necə dinləyə biləcəyinizi və göstərilən düymələr birləşməsinin basılıb-basılmadığını öyrənə biləcəyinizi göstərən bir nümunə:

$(sənəd).keypress("c", funksiya(e) ( if(e.ctrlKey) ( console.log("Ctrl+c basıldı"); ) ));

Ctrl + Enter düymələri birləşməsini necə dinləyə biləcəyiniz nümunəsi:

$(sənəd).keydown(funksiya(e)) ( // macOS X bacarır, əgər ((e.ctrlKey || e.metaKey) && (e.keyCode == 13 || e.keyCode == 10)) ( / / hərəkətləriniz...))

Keydown və keyup hadisələrinin istifadəsinə misal:

...$("#ad"). keydown(function()( $(bu).css("fon rəngi", "sarı"); )). keyup(function()( $(this).css("fon rəngi, "çəhrayı"); ));

jQuery-də aşağıdakı hadisələri yalnız forma elementləri üçün deyil, fərqləndirmək olar:

• fokus (fokus)
• bulanıqlıq (fokus)
• dəyişmək
• daxiletmə (mətn forması elementləri üçün)
• seçin
• təqdim

Fokus hadisəsi fokus aldıqda elementə göndərilir. Bu hadisə daxiletmə, seçmək və elementləri əlaqələndirmək (a href="..."), həmçinin tabindex xassə dəsti olan hər hansı digər element üçün işə salınır. Elementə diqqəti cəlb etmək adətən klaviaturada Tab düyməsini sıxmaqla və ya basmaqla həyata keçirilir. Fokus hadisəsi qabarmır.

Fokusdan əlavə, başqa bir oxşar hadisə var, buna fokus adlanır. Fokusdan fərqli olaraq, bu hadisə qabardır və o, məsələn, əsas elementlər tərəfindən fokus hadisəsini aşkar etmək üçün istifadə edilə bilər.

Bulanıqlıq hadisəsi fokusunu itirdikdə elementə göndərilir. Fokus kimi, bulanıqlıq hadisəsi də oxşar fokuslanma hadisəsinə malikdir. Bu hadisə bulanıqlıqdan fərqlənir ki, qabarda bilər. Bu xüsusiyyət, məsələn, onu yalnız onu (hədəf) adlandıran elementdə deyil, əsas elementlərdə əldə etmək üçün istifadə edilə bilər.

Məsələn, div elementi fokus hadisəsi qəbul etdikdə onun fonunu narıncı rəngə təyin edin:

... $("#demo"). focusin(funksiya()( $(bu).css("fon rəngi","narıncı"); )) .focusout(funksiya()( $(bu).css("fon rəngi","miras") ;)))

Fokus və bulanıqlıq hadisələri ilə tam olaraq eyni işləməyəcək, çünki onlar açılmır.

$("#demo girişi"). fokus(funksiya()( $(bu).parent().css("fon-rəng","narıncı"); )) .blur(funksiya()( $(bu).parent().css("arxa fon -rəng","miras"); ));

Dəyişiklik hadisəsi girişin, mətn sahəsinin və elementlərin seçilməsinin dəyərindəki dəyişikliyi qeyd etmək üçün nəzərdə tutulub. Seçim , qeyd xanaları və radio düymələri üçün bu hadisə dərhal işə düşür (yəni istifadəçi seçim edən kimi). Lakin digər elementlər üçün bu hadisə həmin element diqqəti itirənə qədər baş verməyəcək.

İstifadə nümunəsi hadisələri dəyişdirin onay qutusu elementinin vəziyyətinə nəzarət etmək. Düymənin mövcudluğu qeyd qutusunun vəziyyətindən (yoxlanılıb və ya yox) asılı olacaq:

Göndər ... $(funksiya() ( $("#razılaşır").on("dəyişiklik", funksiya()( əgər (bu.yoxlanılıb)) ( $("#göndər").prop("disabled",false ); ) else ( $("#send").prop("disabled",true); ) )); ));

Seçilmiş element dəyişdikdə onun dəyərini necə əldə edəcəyimizi nəzərdən keçirəcəyimiz bir nümunə:

Birinci dəyər İkinci dəyər Üçüncü dəyər ... $(funksiya() ( $("#list").on("dəyişiklik", funksiya()( var dəyər = $(bu).val(); $("#nəticə ").mətn(dəyər); )); ));

Seçim dəyişdikdə bütün seçilmiş elementləri necə əldə edəcəyimizi nəzərdən keçirdiyimiz bir nümunə:

Yaşıl Qırmızı Mavi Qəhvəyi Bənövşəyi Boz ... $("seç") .dəyişiklik(funksiya () ( var rənglər = ; $("seçim seçimi:seçilmiş").hər biri(funksiya() (colour.push($(bu)) .text()); )); console.log("Seçilmiş rənglər: " + colors.join()); )) .change();

Seçilmiş element üçün dəyişiklik hadisəsini proqramlı çağırmağa nümunə:

// siyahı - element id dəyişikliyi $("#list").trigger("dəyişiklik"); // stenoqrafiya $("#list").dəyişiklik(); // yalnız dəyişiklik hadisə idarəçisinə zəng edin $("#list").triggerHandler("dəyişiklik");

Giriş elementinin dəyərini almaq üçün dəyişiklik hadisəsindən istifadə nümunəsi:

... $(funksiya() ( // giriş dəyərinin dəyişməsi hadisəsi (yalnız diqqət itirildikdə işə düşür) $("giriş").on("dəyişiklik", funksiya()( var dəyər = $(bu).val( ) ;console.log(dəyər); )); ));

Lakin dəyişiklik hadisəsi ilə yanaşı, mətn elementləri üçün giriş hadisəsi də var. Bu hadisə, dəyişiklikdən fərqli olaraq, verilən element diqqəti itirdikdən sonra deyil, dərhal yaranır.

Giriş elementinin dəyərini əldə etmək üçün giriş hadisəsindən istifadə nümunəsi:

$("input").on("input",function()( var value = $(this).val(); console.log(value); ));

Bir mətn sahəsi elementinin dəyərini əldə etməyin bir yolunu göstərən bir nümunə:

... $("textarea").on("input",function()( var dəyər = $(bu).val(); console.log(value); ));

Radioya bərabər tipli seçilmiş giriş elementinin dəyərini almaq üçün dəyişiklik hadisəsindən necə istifadə edəcəyimizi nəzərdən keçirəcəyimiz bir nümunə:

Windows Linux macOS ... $(funksiya() ( $("giriş").on("dəyişiklik", funksiya()( var dəyər = $(this).val(); console.log(dəyər); )) ;)))

type="text" və ya textarea ilə daxiletmə elementləri daxilində istifadəçi mətn seçdikdə, select hadisəsi brauzer tərəfindən işə salınır.

$("#target").select(function() ( console.log("Adlı hadisə idarəedicisini seçin"); ));

Göndərmə hadisəsi istifadəçi formanı təqdim etməyə çalışdıqda elementdə işə salınır. Bu hadisə yalnız forma elementlərinə əlavə edilə bilər.

Göndərmə hadisəsini istifadə edən bir nümunə:

... ... $("#feedback").submit(funksiya(e) ( // forma təqdimini ləğv e.preventDefault(); // ajax vasitəsilə forma təqdim etmək kimi digər hərəkətlər... ));

Formanı təqdim etmək üçün proqram zəngi:

$("#feedback").submit(); $("#feedback").trigger("göndər");

jQuery sürüşmə vəziyyətini izləmək üçün sürüşdürmə hadisəsindən istifadə edir.

Məsələn, səhifənin sürüşdürülməsi hadisəsinə bir funksiya əlavə edək ki, sürüşdürmə dəyəri 200px-dən böyükdürsə, sürüşdürmə sinfi ilə elementi göstərəcək və sürüşdürmə dəyəri bu dəyərdən kiçik olduqda onu gizlədək.

// funksiya stenoqrafiyası $(pəncərə).scroll(funksiya() ( // səhifə sürüşəndə ​​nə baş verir... əgər ($(this).scrollTop()>200) ( $(".scrollup").fadeIn( ); ) else ( $(".scrollup").fadeOut(); ) ));

Brauzer pəncərəsinin dəyişdirilməsi hadisəsini dinləmək üçün ölçüsünü dəyişmədən istifadə edin:

Məsələn, brauzer pəncərəsi dəyişdikdə səhifənin sonunda onun enini və hündürlüyünü göstərəcək bir işləyici yaradaq:

$(pəncərə).resize(funksiya() ( $("bədən").əlavə("

En x Hündürlük = " + window.innerWidth + " x " + window.innerHeight + "

HTML-də bəzi elementlər standart davranışa malikdir. Məsələn, istifadəçi linkə kliklədikdə href atributunda göstərilən ünvana gedir. Bu hərəkətə ehtiyacınız yoxdursa, onu ləğv edə bilərsiniz. Standart davranışı ləğv etmək üçün hadisə idarəedicisində hadisə obyektinin preventDefault metodunu çağırın.

Məsələn, xidmət sinfinə malik olan səhifədəki bütün keçidlərin standart davranışını ləğv edək:

$("a.service").on("klik",funksiya(e)( //defolt brauzer əməliyyatını ləğv e.preventDefault(); //linkin yerinə yetirəcəyi hərəkətlər... ));

Standart hərəkəti ləğv etməklə yanaşı, hadisə mexanizmində köpürmə kimi bir şey də var. Bu ondan ibarətdir ki, brauzer hadisə yaradan zaman bunu təkcə cari element (hədəf) üçün deyil, həm də onun bütün nəsli, o cümlədən valideyn üçün edir:

Cari element (hədəf) -> hədəfin valideyni -> baba və baba -> ... -> sənəd -> pəncərə

JQuery-də, təqdim olunan zəncirdəki bəzi elementin icra edilməsinə ehtiyac olmayan bu hadisə üçün eyni idarəediciyə malik olduğu ssenarilər var. Və bu hadisə bu elementə yayılmaması üçün dayandırılmalıdır. Bunun üçün istədiyiniz elementin işləyicisində hadisə obyektinin stopPropagation metodunu çağırın. Bu metodu çağırdıqdan sonra hadisə dayanacaq və qabarmayacaq.

Məsələn, kursor sinif işarəsi olan elementə gətirildikdə onun məzmunu narıncı rəngə çevrilməlidir.

Bəzi mətn... fraqment..... davam... $(".mark").on("hover", funksiya(e)( e.stopPropagation(); $(this).css ( "rəng",narıncı); ), funksiya(e)( e.stopPropagation(); $(this).css("rəng",qara); ) ));

Bu halda, stopPropagation metodu göstərilməyibsə, kursor işarə sinfi ilə span elementinə gətirildikdə, bu hadisə təkcə onun üçün deyil, onun bütün ana elementləri üçün baş verəcəkdir. Və bu nümunədəki bu, yalnız aralığa əlavə edilmiş mətnin rənginin deyil, bütün paraqrafın dəyişəcəyinə səbəb olacaqdır.

Brauzerin standart davranışını ləğv etməli və hadisənin köpürməsini dayandırmalısınızsa, jQuery-də bu iki metodu çağırmaq əvəzinə, funksiyanın nəticəsi olaraq sadəcə olaraq false qaytara bilərsiniz.

$("a").on("klik", funksiya(e)( //e.preventDefault(); //e.stopPropagation(); ... false qaytarın; ));

Hadisəni hələ mövcud olmayan elementə asmaq üçün on funksiyasının aşağıdakı konstruksiyasından istifadə edə bilərsiniz:

$(sənəd).on(hadisə adı, seçici, işləyici); // sənəd və ya hər hansı digər mövcud əsas element // eventName - hadisənin adı // selektor - hadisə idarəedicisinin işə salınmalı olduğu nəsilləri süzgəcdən keçirən selektor // işləyici - hadisə idarəedicisi

Bu hərəkət hadisənin ortaya çıxması və buna görə də bu elementin bütün əcdadlarında baş verməsi səbəbindən həyata keçirilə bilər. Və səhifədəki bütün hadisələrin qabardığı obyekt sənəddir. Buna görə də əksər hallarda bunu seçirlər. Bundan sonra, selektoru bilməklə, on funksiyası ona uyğun gələn elementləri (bu hadisəyə səbəb olan element (hədəf) və onun bütün əcdadları daxil olmaqla) proqramlı şəkildə seçə bilər. Və sonra bütün seçilmiş elementlər üçün on funksiyasında göstərilən işləyicini yerinə yetirin. Hadisənin idarə edilməsinin başqa bir elementə (əcdad) ötürüldüyü hərəkətlərə jQuery-də hadisənin ötürülməsi prosesi də deyilir.

Məsələn, hələ səhifədə olmayan elementə hadisə əlavə edək:

Düymə əlavə edin // id="addButton" ilə elementə kliklədikdə səhifənin yuxarısına yeni düymə əlavə edin $("#addButton").on("click", function(e) ( $("body") ).prepend("Məni sil"); )); // $(document).on("click",".deleteMe", function() ( $(this).remove(); )) səhifədə olmayan elementləri işə salacaq klik hadisəsi əlavə edin. ;

Nümayəndəlik yalnız dinamik olaraq yaradılmış obyektlərin hadisələrini idarə etmək üçün deyil, həm də hər bir elementə bir işləyici bağlamamaq üçün istifadə edilə bilər (əgər səhifədə onlardan çox ola bilərsə).

Məsələn, şərhlərdə getməyi qadağan edəcəyik xarici linklər(biz bu cür hərəkətləri uzaq səhifəyə yönləndirəcəyik):

$(sənəd).on("klik","#şərh a",funksiya(e) ( if(!(location.hostname === this.hostname || !this.hostname.length)) ( e.preventDefault( ); location.href="uzaqda?link="+encodeURIComponent($(this).attr("href")); ) ));

Hadisə idarəediciləri off metodundan istifadə edərək silinir. Eyni zamanda, ondan istifadə edərək, yalnız on metodundan istifadə edərək əlavə olunan işləyiciləri silə bilərsiniz.

Heç bir arqument olmadan off metodunun çağırılması göstərilən elementlərə əlavə edilmiş bütün hadisə idarəedicilərini siləcək.

Məsələn, keçid sinfi olan elementlər üçün bütün işləyiciləri deaktiv edək:

$(".link").off();

Məsələn, link sinfi olan bütün elementlərdən klik hadisəsini silək:

$(".link").off("link");

Xüsusi seçici (**) həvalə edilməmiş hadisələri saxlayarkən yalnız həvalə edilmiş hadisələri silməyə imkan verir:

$(".link").off("klik","**");

Yalnız müəyyən edilmiş həvalə edilmiş hadisələri silin (selektordan istifadə edərək):

// həvalə edilmiş hadisənin əlavə edilməsi $("ul").on("klik","li", function()( // li elementinin məzmununu konsolda çap edin console.log($(this).text(). ))) ))) ; // həvalə edilmiş hadisəni silin $("ul").off("klik","li");

Sinif şousu olan elementlər üçün modal ad məkanında həvalə edilmiş klik hadisəsinin bütün openModal işləyicilərini silin:

$("body").on("click.modal", ".show", openModal);

jQuery xüsusi hadisələr yaratmaq üçün on və trigger metodlarından istifadə edir.

Aşağıdakı nümunədən istifadə edərək fərdi jQuery hadisəsinin necə yaradılacağına baxaq:

Fərdi hadisə vurğulamasını işə salın (yaşıl rəng) Fərdi hadisə vurğulamasını işə salın (qırmızı rəng) ... // mətnin və onun məzmununun rəngini dəyişəcək bütün p elementlərinə fərdi hadisə əlavə edin // verilənləri ötürə bilərik rəng arqumentləri və başlıqdan istifadə edərək trigger üsulu ilə $(".modul p").on("vurğulamaq", funksiya(e, rəng, başlıq) ( $(this).css("rəng",color); $( this).text("Fərdi vurğulama hadisəsi " +başlıq); )); // müvəffəqiyyət sinfi olan elementə kliklədikdə, vurğulanan xüsusi hadisəni çağırın və ona parametrləri ötürün $(".success").click(function()( // ikinci arqumentdən istifadə edərək, məlumatları hadisə idarəedicisinə ötürün. $(bu).yaxın(".modul").find("p").trigger("vurğulamaq",["yaşıl","(yaşıl rəng)"]); )); // xəta sinfi olan elementə kliklədikdə, vurğulanan xüsusi hadisəni çağırın və ona parametrləri ötürün $(".error").click(function()( // ikinci arqumentdən istifadə edərək, məlumatları hadisə idarəedicisinə ötürün. $(bu).yaxın(". modul").find("p").trigger("vurğulamaq",["qırmızı","(rəng qırmızı)"]); ));

Sonuncu mövzuda düymələr basıldıqda baş verən hadisələr nəzərdən keçirilmişdir. Bu mövzuda digər forma hadisələrini nəzərdən keçirəcəyik. Formanın serverə təqdim edilməsi də daxil olmaqla.

Forma elementi fokuslandıqda, fokus hadisəsi işə düşür və forma elementi fokusdan çıxanda bulanıqlıq hadisəsi işə düşür. Gəlin bir giriş sahəsi yaradaq və mətni konsola fokus aldıqda və fokusdan çıxanda çap edək:

HTML kodu:

Elementin üslubunu dəyişdirmək üçün bu hadisələrdən istifadə etməyin mənası yoxdur. Bunun üçün CSS-də fokus psevdo-klassı var.

Daxiletmə hadisəsi istifadəçi giriş sahəsinə mətn yazdıqda baş verir. Hər bir simvol əlavə edildikdə və ya silindikdə və mətn giriş sahəsinə kopyalandıqda işə salınır. Bəzi brauzerlərdə o, qeyri-adi şəkildə işləyir: hər dəfə simvol daxil edildikdə, bulanıqlıq hadisəsi işə salınır, sonra giriş hadisəsi idarəedicisi icra edilir, sonra isə fokus hadisəsi işə salınır. Fokus və bulanıq hadisə idarəçiləri yoxdursa, bu problem deyil. Ancaq əgər onlar varsa, hər dəfə bir xarakter əlavə edildikdə işləyəcəklər.

Gəlin səhifəyə başqa bir teq əlavə edək və mətn daxil edərkən onun dəyərini göstərək:

HTML kodu:

JavaScript:

Forma serverə təqdim edildikdə təqdim hadisəsi işə düşür. İstifadəçinin formaya daxil etdiyi məlumatları yoxlamaq üçün istifadə olunur. İşləyicidə forma elementlərinin dəyərləri yoxlanılır və hər hansı dəyər səhv daxil edilərsə, forma ləğv edilir. Bu, adətən nəyin düzəldilməli olduğunu göstərən bir mesajla nəticələnir.

Yaradılmış teqləri formada yerləşdirək və formanı göndər düyməsini əlavə edək:

HTML kodu:

Əvvəlki nümunələrdə forma elementləri artıq tapılıb, ona görə də işləyici yenidən axtarış aparmır.

Əgər forma düzgün doldurulubsa, yəni bütün sahələrdə ən azı iki simvol varsa, o zaman brauzer action atributunda göstərilən faylı işə salmağa çalışacaq və belə bir fayl olmadığı üçün xəta baş verəcək. Ancaq bunda heç bir risk yoxdur, buna görə də skriptin işini yoxlamaqdan qorxmaq lazım deyil. Sahələrdən birinə ikidən az simvol daxil edilərsə, mesaj görünəcək və göndərmə ləğv ediləcək. Əgər çoxlu çek varsa, onda hər bir çek üçün öz mesajınızı göstərə və forma təqdimini ləğv edə bilərsiniz.

Giriş hadisəsi , , və ya elementin dəyəri dəyişdirildikdə işə düşür.

Bu səhifədəki uyğunluq cədvəli strukturlaşdırılmış məlumatlardan yaradılıb. Məlumatlara töhfə vermək istəyirsinizsə, lütfən, https://github.com/mdn/browser-compat-data ünvanına daxil olun və bizə sorğu göndərin.

GitHub-da uyğunluq məlumatlarını yeniləyin