JQuery'deki OnClick İşlevi Örneklerle Açıklandı

JavaScript'teki hızlı, küçük ve zengin özelliklere sahip kitaplıklardan biri jQuery'dir. jQuery, HTML belgeleri yapmak, olay işleme, geçiş ve manipülasyon vb. için kullanılır.

Bir HTML öğesi tıklandığında, jQuery click olayı meydana gelir. jQuery'de onclick işlevini tetiklemek için click() yöntemi kullanılır. Örneğin, bir belgedeki bir paragrafa tıklandığında, $(“p”).click() yöntemi tarafından bir click olayı tetiklenir. Kullanıcı, işlevi çalıştırmak için bir tıklama olayı gerçekleştiğinde, bir tıklama yöntemine bir işlev ekleyebilir. Böylece bir click() olayı tetiklendiğinde bir kod parçası yürütülür.

Fare tıklaması, HTMLElement.click() yöntemiyle simüle edilir.

Click() işlevi, jQuery'de bir click olayını başlatan yerleşik bir işlevdir. İlgili bir öğeye tıklandığında, bir click() yöntemiyle bir olay tetiklenir. Bu olay daha sonra belge ağacında (veya olay zincirinde) daha yüksek olan öğelerin bir tıklama olayını tetikler .

Adından da anlaşılacağı gibi, kullanıcı tarafından öğenin üzerinde fare düğmesine basılması ve bırakılmasıdır.

on() yöntemi aracılığıyla seçilen öğelere bir veya daha fazla olay işleyici eklenir. Bir öğeye tıklandığında, bir click() olayı meydana gelir. Bir click() olayı meydana geldiğinde bir click() yöntemi yürütülür. Click() yöntemine bir işlev eklenir ve yürütülür. Diğer jQuery olaylarıyla birlikte bir click() yöntemi kullanılır.

Bu nedenle .click(), bir olay işleyicisini "tıklama" JavaScript olayına bağlar veya bir öğe üzerinde bir olayı tetikler. JavaScript onclick yönteminin varyasyonları şunlardır:

1. .click( işleyici ).
2. .click( [eventData ], işleyici).
3. .Tıklayın().

Birinci ve ikinci varyasyonlar, .on( "tıklama", işleyici ) için kısa bir form ve son varyasyondaki .trigger ("tıklama") kısayoludur.

Bir fare işaretçisi öğenin üzerine geldiğinde ve düğme basılıp bırakıldığında, o öğeye click() olayı gönderilir. Olay, HTML'nin herhangi bir öğesi tarafından alınabilir.

Click() olayı, aşağıdaki kod aracılığıyla diğer öğeye tıklandığında da tetiklenebilir.

Bu kod ile mesaj, eleman tarafından uyarılacaktır.

Aşağıdaki olaylar aracılığıyla yalnızca bir click() olayı tetiklenir.

• Farenin imleci bir öğenin içindeyken ve farenin düğmesine basıldığında.
• Farenin imleci bir öğenin içindeyken ve farenin düğmesi serbest bırakıldığında.

Bir eylemde bulunmadan önce, yukarıda bahsedilen olaylar genellikle istenen sıradır. Aksi takdirde, diğer uygun olay mouse down veya mouse up olayıdır.

.click() yönteminin .on( “click”, işleyici ) kısayolu olması nedeniyle, .off( “click”) kullanımı yoluyla ayırma olasılığı mevcuttur.

kullanım

Bir click() yöntemini çağırmak için kullanılabilecek iki yol mevcuttur:

• Belirli bir işlev argümanıyla
• Belirli bir argüman olmadan

jQuery'deki onclick işlevi , istenen görevi gerçekleştirmek için div, paragraflar, köprüler vb. gibi HTML öğelerinde kullanılabilir. Tıklama, fare üzerindeki düğmeye basıldığında meydana gelen bir fare olayıdır. Ancak, faredeki işaretçi öğenin içindeyse olay gerçekleşir.

Sözdizimi:

$(seçici).click() ; -> seçilen öğeler için bir tıklama olayını tetiklemek için kullanılır.

$(seçici).tıkla(işlev); -> bir tıklama olayına işlev eklemek için kullanılır.

• Kullanılan isteğe bağlı parametre, bir tıklama olayı meydana geldiğinde yürütme için kullanılan "işlev"dir.
• Dönüş değeri: Gerçekleştirilecek işlevle belirtilen seçili öğe döndürülür.

Click() yönteminin uygulanması

1. Bir fonksiyon argümanı verildiğinde

Bu tip uygulamada, bir fonksiyon girdi olarak alınır ve click() metodu her çağrıldığında yürütülür.

• Kodun yazılması, kod etiketi arasında ve kodun HTML gövdesi içindedir .
• Fonksiyonun çağrılması bir h1 stili özniteliği olarak yapılır.
• Fonksiyonla birlikte bir argüman bildirilir ve ayrı bir fonksiyon olarak alınır.
• Yöntem geçişi , 1000ms gecikmeli bu operatör kullanılarak nesne üzerine uygulanır .
• Belirli bir işlev argümanıyla uygulama yönteminin bir örneği aşağıda gösterilmiştir.

Kodun çıktısı “Bana tıklamak metni değiştirecek!” olacaktır.

2. Argüman verilmediğinde

Javascript onclick yöntemi , bir Yönteme zaten bir öğe atanmış. Bu nedenle bir eleman, başka bir elemanın tıklandığında olayı ayrı ayrı çağırabilir . Bu, aşağıdaki adımlarla başarılabilir:

1. Bir nesne, önce tıklanabilir belirli bir stilin bir özniteliği ile bildirilmelidir. Nesne için bir onclick eylemi bildirilmelidir.
2. Click() yönteminin farklı bir stil biçimi olan p ile ilişkilendirilmesinin yapıldığı kodun gövdesinde bir komut dosyası bloğu oluşturulmalıdır .
3. Halihazırda tanımlanmış olan h1 onclick yöntemi, işlev çağrısı içinde çağrılacaktır.
4. Aynı onclick yöntemi daha sonra bir öznitelik için çağrılır.
5. Belirli bir argüman olmadan bir click() yönteminin uygulanmasını gösteren bir kod örneği aşağıda gösterilmiştir.

Kodun çıktısı “Beni tıkladığınızda bir uyarı çağırır!” şeklindedir.

• • $.on yönteminde dblclick, change ve diğerleri gibi birçok olay kullanılabilir.

3. Bir HTML butonu oluşturma ve butona tıklandığında sayfaya metin ekleme. Click() yöntemi en yaygın olarak bir düğmeye eklenir, ancak bir web sayfasındaki diğer öğelere eklenebilir.

• • Temel bir düğme, "ana" kimliğine sahip bir <div> içinde bulunan "btn-birincil" kimliğiyle oluşturulur.
  • Kod aracılığıyla, yeni içerik, düğmeye tıklandıktan sonra <p> etiketinde bir "yeni içerik" sınıfıyla görüntülenecektir.
  • jQuery, <script> etiketleri içine alınır.

• • Click() yöntemi düğmenin kimliğine eklenir ve anonim bir işlev olan geri arama işlevi olarak bir argüman alınır.
  • "Düğme tıklandı" dizesi, geri arama işlevi tarafından döndürülür.

• • Adı olmayan bir işlev, yalnızca anonim bir işlev olarak adlandırılır ve bir yöntemin argümanları olarak geri aramalar olarak kullanılır. Herhangi bir duyarlı web sitesi ve uygulama oluşturmak için anonim işlevler ve geri arama yöntemleri temel taşı görevi görür.

• • Kod, <div> “main” içindeki düğme ile başlayacaktır.
  • Düğmeye tıklandığında, düğme seçiciye click() yöntemi eklendiğinden, olay işleyicisi tarafından geri arama işlevi çağrılır.
  • “Düğme tıklandı” dizesi görüntülenecektir.
  • Yukarıdaki kod içeriği yalnızca bir kez oluşturacaktır, ancak koda her tıklandığında dizeyi görüntülemek için HTML() yerine append() kullanılır.

• • <p> etiketinin içindeki yeni içerik olarak dizeyi üç kez üretecektir.
  • Düğmeye her tıklandığında geri arama işlevi çağrılır.

Çözüm

jquery'de onclick fonksiyonunun işleyişi , kullanımları ve örnekleri ile birlikte makalede tartışılmıştır . Yalnızca birkaç satır kodla, JavaScript onclick yöntemiyle web sayfası işlevselliği oluşturulabilir .

Web geliştirme hakkında daha fazla bilgi edinmek ve diğer ilgili alanlarda uzmanlaşmak istiyorsanız, upGrad tarafından sunulan “ Bilgisayar Biliminde Yüksek Lisans ” kursuna göz atabilirsiniz. Giriş seviyesindeki profesyoneller (21 ila 45 yaş arası hem erkek hem de kadın) için özel olarak tasarlanan kurs, uzun mesafeli taşıtların kolaylığı için canlı oturumlarla çevrimiçi bir platformda olacaktır. 30'dan fazla proje ve ödevle öğrenci, IIIT-Bangalore ve LJMU mezun statüsünün avantajlarından yararlanacaktır. Herhangi bir yardım için ekibimizle iletişime geçmekten çekinmeyin.