Javascript tıklama eylemi. Birkaç basit javascript onclick örneği. Kendi etkinliklerinizi ayarlama

Veya

... Tarayıcı her şeyi silip süpürecek ve her şey işe yarayacak. Bu sadece, klavyeden bir öğeye erişim yalnızca bir bağlantı veya düğme nesnesi için mümkündür. Ve bir an için kullanıcının faresi olmadığını ve yalnızca klavyeden çalıştığını varsayarsak, sitede dokunabileceği tek şey sadece düğmeler veya bağlantılar olacaktır. Üçüncüsü yok! Bu nedenle, onclick olayını klavyeden erişilemeyen nesnelere "asmak" çok çirkindir. İnsanca değil, bir şekilde öyle. Bundan ikinci kural geliyor HTML'de onclick- bu olay yalnızca bir bağlantıya ("a" etiketi) veya bir düğmeye ("düğme etiketi") bağlanmalıdır. Aksi takdirde, kod çalışmaya devam eder, ancak cehennemde, bu tür programcılar için - ayrı bir büyük kızartma tavası hazırlanmıştır.
(HTML'de) biçimlendirme ve düğmelerle ("batonlar") çalışmak belirli zorluklara neden olduğundan, tek, evrensel ve en uygun seçenek yalnızca bir bağlantıdır ("a" etiketi). Ancak, bu etiketle bile - her şey o kadar düzgün değil. Şimdi kod satırımızla ayrıştırmaya geri dönelim:

MENÜ # 1

Tartışmadan başlık bağlantılarını tamamen açık bir şey olarak atıyoruz. Kalıntılar
MENÜ # 1
Diğer tüm yazma saçmalıkları, niteliği engelleme konusuyla ilgili olacaktır. href bağlantının çalışan bir bağlantı olmaktan çıkması, ancak yine de işlevleri yerine getirmesi için uygun şekilde "felce uğratılması" gereken . tıklamada.

yanlış döndür;

yanlış döndür; href niteliğinin doğrudan engellenmesidir. Kullanıcının tarayıcısında Java komut dosyası etkinse, onclick olayı ilgili komut dosyasından çağrılır ve bağlantıya tıklanmaz. Yani, "arama bağlantısına" tıkladığınızda href'den adrese anında geçiş olmaz, tıklamada bir etkinlik eklendi yanlış döndür; ve javascript etkinleştirilirse aşağıdaki bağlantıyı iptal edecek olan önce işlevin yürütüleceği varsayılır. Bu nedenle, java betiği yürütülürken yok sayıldığı için href özniteliğinin içeriği önemsizdir.

Ama soru şu. Ve bir kullanıcının tarayıcısında bir Java komut dosyası devre dışı (devre dışı) varsa ne olur? O zaman bağlantımız nasıl davranacak? Entrika olmayacağım, ancak olası senaryoları hemen ortaya koyacağım - Java betiği kapalıyken böyle bir bağlantıya tıkladıktan sonra href niteliğinin olası değerleri ve ilgili tarayıcı davranışı.
Tabii ki, kullanıcının tarayıcısında javascript devre dışı bırakılmışsa, bu bir sorun ve bir karmaşadır. Kullanıcının tarayıcısında Java komut dosyalarının yürütülmesi devre dışı bırakılırsa (yasaklanırsa), öznitelikle sürekli sorunlar başlar. href etiket "a" olduğundan, hala bir bağlantıdır ve tarayıcı onu takip etmeye çalışacaktır.

Özelliği tamamen atın href bağlantıdan izin verilmez. Özellik yok href Bağlantı metninde, hiçbir şekilde vazgeçmek mümkün değildir ve herhangi bir onaylayıcı, baharatlı ve narin vücudunun böyle bir kötüye kullanılması nedeniyle derhal rahatsız edilecektir. Öyleyse, geriye tek bir seçenek kalıyor - niteliği doldurmak href sindirilebilir içerik Burada şunlar mümkündür: ayrılmak href tamamen boş, bir kare "#" veya ifade ile doldurun javascript: //... Java komut dosyası devre dışı bırakıldığında (veya yapıştırıldığında), bu tür bağlantılara tıkladıktan sonra aşağıdakiler gerçekleşir:

Araştırma href niteliği boş. Böyle bir bağlantıya tıkladıktan sonra, tarayıcıdaki sayfa yeniden yüklenecektir. Araştırma href niteliği "#" dir. Böyle bir bağlantıya tıkladıktan sonra, kullanıcı yeniden yüklemeden sayfanın en üstüne atılacaktır. Araştırma href niteliği "javascript: //" olarak ayarlanmıştır. Böyle bir bağlantıya tıkladıktan sonra hiçbir şey olmuyor. href = "javascript: //"- bağlantıya tıklamak tarayıcı tarafından görmezden gelinecektir. Anlam "javascript: //" href özelliği için bu, Java komut dosyası kapatıldığında bir bağlantıyı engellemeye yönelik standart "saplama"dır.

href = "javascript: //" - saçmalık!

Neden saçmalık? Çünkü arama motorları dünyasında internet hayatı kendine göre ayarlamalar yapmaktadır. Doğru ve anlamsal bir bakış açısıyla! düzen, href özniteliğine gerçek bir bağlantı yazıp bu bağlantı için gerçek bir başlık eklemek kesinlikle mantıklı olacaktır. Daha sonra, böyle bir bağlantıya tıkladıktan sonra, iki şeyden biri gerçekleşecektir: ya ilgili Java betiğinden onclick olayı yürütülecek ya da gerçek bağlantı gerçek sayfaya yönlendirilecek (Java betiği devre dışıysa veya takılı kalmışsa) / az yüklenmiş).

Böylece özetleyelim. Java komut dosyası olayını çağırmak için bağlantıda, href'de javascript kapalıyken geçiş için gerçek sayfaya gerçek bağlantıyı koyduk ve onclick'te - Java komut dosyası açıldığında komut dosyasını yürütme isteğini çağıran işlev üzerinde.

Başka bir deyişle, içinde "Href" kullanıcının "call event bağlantısını" tıkladığında yeniden yönlendirileceği herhangi bir web sayfasına tamamen normal ve çalışan bir bağlantı olmalıdır. kapalı Java komut dosyası ve ne zaman komut dosyası tarafından yoksayılacak dahil Java komut dosyası. Bu kadar …

Eh, sonunda -

Java komut dosyasını etkinleştirmek/devre dışı bırakmak için tarayıcıyı kontrol etme

Böyle bir kontrol için standart kod şöyle görünür:

nerede, için dışında herhangi bir stili CSS'de yazabilirsiniz. görüntü yok; ve benzer stiller ... Tarayıcı ZORUNLU !!! kullanıcı tarayıcısında Java komut dosyasını devre dışı bırakırsa bu mesajı ekranda görüntüler. Bu kadar basit bir şekilde, Web Yöneticileri genellikle şöyle yazar: "Lütfen javascript'i açın" veya benzer bir istekle veya başka bir şeyle bazı güzel resimler görüntüleyin ... Etiketin içinde not yazısı herhangi bir HTML etiketi koyabilirsiniz. Ve bu hiç de ekstra bir önlem değil. Gerçi artık javascript kullanmayan bir site bulmak o kadar kolay değil.

Yanımızda olmayan bize karşıdır.
Tarayıcıda kapatılan Java komut dosyasıyla ilgili sorun, genel olarak kökten ve kökten çözülebilir. Örneğin, bölümün içine ekleyin HTML5 kodu, örneğin:


burada, http://mysite.ru/ hemen yönlendirildiği web sayfasıdır
kullanıcı tarayıcıda devre dışı Java komut dosyası.

JavaScript dilinin belki de bu dildeki en önemli özelliklerinden biri, yetenektir. bazı olayları ele almak... Bu yetenek, web programlamadaki diğer dillere kıyasla JavaScript'e özgüdür, çünkü bunu yalnızca bu dil yapabilir.

Olay ve olay işleyicileri nedir

Olay, kullanıcı veya sayfadaki diğer nesneler tarafından gerçekleştirilebilen bir eylemdir.

Bir olayın en çarpıcı örneği, kullanıcının bir nesneye tıklamasıdır ( Tıklayın), bir düğme, bağlantı veya başka bir öğe olsun. Bir olayın başka bir örneği, fareyi bir nesnenin üzerine getirmektir ( fareyle üzerine gelmek), resmin üstünde söyleyin. Ayrıca, olay tam sayfa yüklenir ( yük). Genel olarak, sitede gerçekleşen tüm eylemler olaydır.

Böylece sayfada üretilen herhangi bir olayı yakalayabilir ve uygun işleyiciyi kullanarak işleyebiliriz. Örneğin, fareyi bir div bloğunun üzerine getirdiğimizde, "Metin alanındasınız" diyelim, bir mesaj görüntüleyebiliriz. Veya düğmeye tıkladığınızda, sayfadan bazı blokları gizleyin. Genel olarak, bir olayı işlemeden önce birçok şey yapılabilir.

Ve bir olayı işlemek için bu olay için özel bir işleyici kullanmanız gerekir. Her olayın kendi işleyicisi vardır, örneğin, tıklama olayı ( Tıklayın) bir işleyici var tıklamada... Fareyi nesnenin üzerine getirme olayı ( fareyle üzerine gelmek) bir işleyici var fare üzerinde... Ve tam sayfa yükleme olayı ( yük) bir işleyici var aşırı yük.

Yani anladığın gibi işleyici adı, "on" öneki + olayın adından oluşur.

Olayların ve işleyicilerin tam listesi referansta bulunabilir, bu makalede yalnızca en sık kullanılanları ele alacağız.

Olay işleyicisi HTML öğesinin kendisinde bir nitelik olarak adlandırılır. JavaScript kodunu doğrudan işleyicinin değerine yazabilirsiniz, ancak gerekli işlemleri yapacak bazı işlevleri çağırmak daha iyidir. İşlev, head bloğunun içinde veya body etiketinin sonunda bulunabilen komut dosyası etiketinin içinde açıklanmalıdır. Bu işlevin parametresi iletildi kelime bu, yani geçerli nesne.

Şimdi basit bir örnek yazalım. Fareyi metnin bulunduğu bloğun üzerine getirdiğinizde, uyarı yöntemini kullanarak, kullanıcının metin alanının içinde olduğuna dair bir mesaj görüntüleyeceğiz.

Lorem Ipsum, baskı ve dizgi endüstrisinin basit bir sahte metnidir. Lorem Ipsum, bilinmeyen bir matbaacının bir tip numune kitabı yapmak için bir yazı galerisini alıp karıştırdığı 1500'lerden beri endüstrinin standart sahte metni olmuştur.

Div (sol dolgu: 50 piksel; genişlik: 200 piksel; kenarlık: 1 piksel düz # 000;)

JavaScript kodu:

blokOver (blok) işlevi (uyarı ("Metin alanındasınız");)

Belgeyi kaydediyoruz, bir tarayıcıda açıyoruz, fare imlecini metnin üzerine getiriyoruz ve bu olayın işlenmesinin sonucunu görüyoruz:




Javascript'te bir özelliğin değerini nasıl alabilirim?

(bu) fonksiyon parametresi ile şunları yapabilirsiniz: geçerli nesnenin bazı özniteliklerinin değerini al, örneğin, kimliğini öğrenin.

Örneğin bir buton oluşturalım ve ona "justButton" değeri ile bir id verelim. Bu butona tıkladığımızda şu mesajı görüntüleyeceğiz: "id_value tanımlayıcısına sahip butona tıkladınız". Burada zaten kullanmalısınız onclick işleyicisi.

JavaScript kodu:

işlev clickOnButton (düğme) (uyarı ("Tanımlayıcıyla düğmeyi tıkladınız:" + button.id);)

Belgeyi kaydediyoruz, bir tarayıcıda açıyoruz ve butona tıklıyoruz.




Aynı şekilde, düğmenin adını da görüntüleyebilirsiniz ( düğme.adı) veya değeri ( düğme.değer)

Elemanın genişlik ve yükseklik değerini alın

Henüz elemanın CSS özelliğinin değerlerini öğrenebilirsiniz genişlik ve yükseklik gibi. Genişliği elde etmek için özellikleri kullanın clientWidth ve offsetWidth ve yükseklik için clientHeight ve offsetHeight... Örneğin tıklanan butonun genişliğini ve yüksekliğini gösterelim.

Şimdi clickOnButton işlevinin içeriği şu şekilde olacaktır:

işlev clickOnButton (button) (// alert ("Kimliği olan bir düğmeyi tıkladınız:" + button.id); var genişlik = button.clientWidth || button.offsetWidth; var height = button.clientHeight || button.offsetHeight; alert ("Düğme genişliği:" + genişlik + "\ nDüğme yüksekliği:" + yükseklik);)

Bu örneğin sonucu:




Hatırlatma olarak, öğenin genişliği dolgu değeriyle birlikte sayılır, bu nedenle 111 piksele eşittir [99 piksel (genişlik) + 6 piksel (sol dolgu) + 6 piksel (sağ dolgu)].

Bir olayı işlemek için çok fazla kod yazmanız gerekmiyorsa, bunu yazabilirsiniz. doğrudan işleyici değerine kodlayın... Yani fonksiyonu çağırmak yerine gerekli kodu hemen yazıyoruz.

Örneğin, bir sayfa yüklerken "sayfa yükleniyor" mesajını görüntüleyebilirsiniz. Bunu yapmak için kullanmanız gerekir load olayı ve onload işleyicisi... Bu işleyiciyi açılış gövde etiketine yazacağız.

Bu yöntem yalnızca olayı işlemek için yalnızca bir kısa kod satırı gerekiyorsa kullanılabilir. Aksi takdirde, işleme kodu bir uzun satırdan veya birçok satırdan oluşuyorsa, bir işlev kullanmanız gerekir.

Ve bu makalenin sonunda, bir formu işlemenin basit bir örneğine bakalım. JavaScript'te form işleme, ilk olarak sunucudaki yükü azaltır ve ikinci olarak sitenin kullanılabilirliğine ek bir artı verir.

Form, bir oturum açma alanı ve bir gönder düğmesinden oluşur. Formu gönderirken, girişin uzunluğunu kontrol edeceğiz. Uzunluğu üç karakterden fazla olmalıdır.

Bu formun HTML yapısıyla başlayalım.

Şimdi form etiketini bir nitelik olarak ekleyin onsubmit işleyicisi, gelişmeler Sunmak... Aşağıdaki şekilde:

Form gönderildiğinde gönder olayı tetiklenir. Veri girişinde bir hata olması durumunda form gönderimini engellemek için return deyimini yazdık. İşlev false döndürürse, gönderme işleyicisinin değeri "return false" olur, bu da formun sunucuya gönderilmeyeceği anlamına gelir. Aksi takdirde form true dönerse, işleyici değeri "return true" olur ve form sorunsuz gönderilir.

Bazen, formun gönderilmesini tamamen yasaklamak gerekir, bu durumda, onsubmit işleyicisinin değeri aşağıdaki gibi olacaktır:

Onsubmit = "checkForm (bu); false döndür;"

Muhtemelen tahmin ettiğiniz gibi, checkForm, gönderme olayı başladığında çağrılacak işlevin adıdır. İşlevi adlandırma kurallarını izleyerek istediğiniz gibi adlandırabilirsiniz.

Ve böylece, örneğimize geri dönelim. Şimdi checkForm fonksiyonunu tanımlamamız gerekiyor. Şu koşulu içerecektir: oturum açma uzunluğu üç karakterden az ise false döndürürüz ve form gönderilmez, aksi takdirde veriler doğru girildiyse formu sunucuya göndeririz.

function checkForm (form) (// adı login'e eşit olan form alanının değerini alın var login = form.login.value; // Oturum açma uzunluğunun üç karakterden az olup olmadığını kontrol edin, ardından bir hata mesajı görüntüleyin ve teslim formunu iptal edin.if (login .length> 3) (uyarı ("Giriş uzunluğu üç karakterden fazla olmalıdır"); false döndür;) başka (doğru dönüş;))

Belgeyi kaydediyoruz, bir tarayıcıda açıp test ediyoruz.




bu şekilde yapabilirsin JavaScript'teki formu kontrol edin ve bir hata durumunda göndermeyi iptal edin.

Hepsi bu kadar sevgili okuyucular. Özetleyelim.
Olaylar çok sık kullanılır, bu yüzden onlarla %100 çalışabilmelisiniz.

Bu makalede, ne öğrendiniz olay ve olay işleyicisi... Buldun mu elemanların nitelik değerleri nasıl alınır ve Bir elemanın genişliği ve yüksekliği nasıl bulunur... Ayrıca form doğrulamanın nasıl yapıldığını da öğrendiniz.

Görevler

1. Basit bir sayı ekleme hesaplayıcısı oluşturun.
   • Sayıları girmek için iki sayı alanı (tür = "sayı") ve "Ekle" etiketli bir düğme içeren bir form oluşturun
   • Gönder düğmesine tıkladığınızda, bu olayı işlemek için işlevi çağırın.
   • Fonksiyonun içinde alanların değerlerini alın ve uyarı yöntemini kullanarak girilen sayıların eklenmesinin sonucunu çıkarın.
   • Düğmeye tıkladıktan sonra formu göndermeyin.

onclick()'in nasıl çalıştığını anlamak isteyen herkese merhaba. Bugünün makalesi, bu olay işleyicisinin çalışma prensibini bir kez ve herkes için anlamanıza ve belirli bir onclick JavaScript örneğini veya daha doğrusu örnekleri ayrıştırmanıza yardımcı olacaktır.

Size bu araçla çalışmanın birkaç yolunu göstereceğim, avantaj ve dezavantajlarının neler olduğunu açıklayacağım ve jQuery'nin olaylarla nasıl çalıştığını anlatacağım. Şimdi malzemenin analizine geçelim!

Olay işleyicileri atama

Öncelikle, sorunun teorik kısmını analiz edelim. Sayfalarındaki hemen hemen herkes komut dosyalarını işler. Ve genellikle bunlar çeşitli olaylardır. Tüm bu programlanmış olayların tetiklenmesi için, onlar için bir işleyici kurulmalıdır.

Yazma kurallarına göre, tüm işleyiciler adlarında gözlemlenen "on + olay adı" içerir. tıklamada ()... Seçilen olaya bağlı olarak, farklı eylemler sonucunda işleme gerçekleşecektir. Bizim durumumuzda, kullanırken tıklamada () yalnızca sol fare tıklamasının neden olduğu olaylar yürütülür.

Olay işleyici atamanın farklı yolları

Bugün, bazı veya bazı olayların işleyicisini koda sokmak için birkaç seçenek var.

Basit olayları kullanma

Html belgesinin tam işaretlemesine onclick () enjekte etmek olan basit bir seçenekle başlayalım. Şuna benziyor:

Gördüğünüz gibi farenin sol tuşu ile butona bastığınızda "Tıkla-tıkla!" mesajı çıkıyor. Küçük ama önemli bir ayrıntıya dikkatinizi çekmek istiyorum. İçeri Alarm sadece tek tırnak ('') kullanılabilir.

Ayrıca bu durumda, anahtar kelimeyi kullanabilirsiniz. Bugün nasılsın... Geçerli öğeye atıfta bulunur ve bunun için mevcut tüm yöntemleri sağlar.

Bana tıkla

Bu kod satırı, "Beni tıkla" metnini içeren bir düğme oluşturur. Bastıktan sonra ekranda şu mesajı göreceksiniz: “Basın!” Düğmenin ilk adının yerini alacak.

Bu yöntem inkar edilemez derecede basittir. Ancak, yalnızca benzer görevler için uygundur, ör. mesajları görüntüleme veya basit komutları yürütme.

Döngüsel yapılar kullanmak, etiket kullanmak vb. gerekiyorsa, bu yöntem uygun değildir. Kodun okunabilirliğini azaltacak, aynı zamanda hantal ve dağınık hale getirecektir.

Bu durumda, işlevlere başvurmaya değer.

Fonksiyonlarla çalışma

İşlevler, gerekli kodu daha sonra olay işleyicisi aracılığıyla çağrılabilecek ayrı bir bloğa ayırmanıza izin verir.

Örnek olarak, 1'den başlayıp 5'e kadar çıkan sayıyı çeşitli derecelerde kullanıcıya göstermek için bir uygulama ekledim. Bunun için bir fonksiyon oluşturdum sayımPow () hangi parametrelere geçilebilir. Uygulamamda, kullanıcının fonksiyon değişkeni olarak bir rakam girmesi gerekiyor.

Böylece yukarıda adı geçen fonksiyonla ilişkilendirilen işleyici aracılığıyla hesaplamalar yapıldı ve görüntülendi.

Bu yöntem genellikle geliştirme sırasında kullanılır. Bununla birlikte, en popüler değildir, çünkü olayları bu şekilde bağlamak her zaman uygun değildir. Bazen, bazı sorunları çözmek için en iyi seçenek, özelliklerini kullanarak nesnelerin olaylara esnek bir şekilde bağlanmasını sağlamaktır.

DOM öğesi özellikleri

Bilmeyenler için DOM - "Belge Nesnesi Modeli"("Belge Nesnesi Modeli"). Çeşitli değişiklikler yapmak ve öğeleri manipüle etmek için ana araçtır.

DOM hiyerarşik bir ağaç olduğundan, belirli dallar üzerinden ilerleyerek sayfa nesnelerinin belirli özelliklerine ve yöntemlerine erişilebilir.

Örnek olarak, arka plan rengini varsayılandan maviye değiştirmeye karar verdim. Bunu yapmak için zincirden geçtim belge.body.style.backgroundRenk.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

jQuery kitaplığını kullanma

Işığın serbest bırakılmasıyla birlikte, yazılı kodu büyük ölçüde basitleştiren ve kısaltan birçok ek komut, özellik ve yöntem vardı. Geliştiriciler çoğu zaman, tanımlayıcısı (document.getElementById (iden)), sınıfı (element.getElementsByClassName (className)), etiketi (elem.getElementsByTagName (tag)) veya adı (document.getElementsByName (ad) ile belirli bir öğeyi elde etmek için özellikleri kullanır. )) ...

Neyin tehlikede olduğunu anlamak için aşağıdaki örneği inceleyin.

Dikkatlice! Düğmeye tıklarsanız, bu içerikte değişiklikler olacaktır.

Bir şans ver, bana tıkla!

Gördüğünüz gibi, her şey oldukça basit çalışıyor.

Makalemi beğendiyseniz, güncellemelere abone olduğunuzdan emin olun. Önümüzde hala birçok ilginç ve bilgilendirici şey var. Yayınlarımın repostları için minnettar olurum. Güle güle!

Saygılarımla, Roman Chueshov

Okumak: 629 kez