Fungsi OnClick di JQuery Dijelaskan dengan Contoh

Salah satu library yang cepat, kecil, dan kaya fitur dalam JavaScript adalah jQuery. jQuery digunakan untuk membuat dokumen HTML, event handling, traversal, dan manipulasi, dll.

Setiap kali elemen HTML diklik, ada kejadian klik jQuery. Untuk memicu fungsi onclick di jQuery , metode click() digunakan. Misalnya, saat mengklik paragraf pada dokumen, peristiwa klik akan dipicu oleh metode $(“p”).click(). Pengguna dapat melampirkan fungsi ke metode klik setiap kali terjadi klik untuk menjalankan fungsi. Sepotong kode dengan demikian dieksekusi setiap kali peristiwa click() dipicu.

Klik mouse disimulasikan melalui metode HTMLElement.click().

Fungsi Click() adalah fungsi bawaan di jQuery yang memulai acara klik. Setiap kali elemen yang relevan diklik, suatu peristiwa dipicu oleh metode click(). Peristiwanya kemudian memicu peristiwa klik elemen yang lebih tinggi di pohon dokumen (atau rantai peristiwa).

Seperti namanya, itu hanyalah menekan dan melepaskan tombol mouse oleh pengguna di atas elemen.

Satu atau lebih event handler dilampirkan ke elemen yang dipilih melalui metode on(). Saat mengklik elemen, peristiwa click() terjadi. Metode click() dijalankan setelah peristiwa click() terjadi. Sebuah fungsi dilampirkan ke metode click() dan dieksekusi. Metode click() digunakan dengan acara jQuery lainnya.

Oleh karena itu .click() mengikat pengendali peristiwa ke "klik" peristiwa JavaScript, atau memicu peristiwa pada elemen. Variasi metode onclick JavaScript adalah:

1. .klik( penangan ).
2. .click( [eventData ], handler ).
3. .klik().

Variasi pertama dan kedua adalah bentuk pendek untuk .on( “click”, handler ) dan shortcut untuk .trigger( “click” ) pada variasi terakhir.

Setiap kali pointer mouse berada di atas elemen dan tombol ditekan dan dilepaskan, event click() kemudian dikirim ke elemen tersebut. Acara dapat diterima oleh elemen HTML apa pun.

Click() event juga dapat dipicu jika elemen lain diklik melalui kode berikut.

Dengan kode ini, pesan akan diperingatkan oleh elemen

Melalui peristiwa berikut, hanya peristiwa click() yang dipicu.

• Ketika pointer mouse berada di dalam elemen dan tombol mouse ditekan.
• Ketika pointer mouse berada di dalam elemen dan tombol mouse dilepaskan.

Sebelum melakukan suatu tindakan, peristiwa-peristiwa tersebut di atas biasanya merupakan urutan yang diinginkan. Selain itu, acara lain yang cocok adalah acara mouse down atau mouse up.

Karena metode .click() menjadi jalan pintas untuk .on( “click”, handler ), kemungkinan pelepasan hadir melalui penggunaan .off( “click” ).

Penggunaan

Ada dua cara yang dapat digunakan untuk memanggil metode click():

• Dengan argumen fungsi yang diberikan
• Tanpa argumen yang diberikan

Fungsi onclick di jQuery dapat digunakan dalam elemen HTML seperti div, paragraf, hyperlink, dll. untuk menyelesaikan tugas yang diinginkan. Klik adalah peristiwa mouse yang terjadi pada penekanan tombol pada mouse. Namun, acara tersebut akan terjadi jika pointer di mouse berada di dalam elemen.

Sintaksis:

$(pemilih).klik() ; -> digunakan untuk memicu peristiwa klik untuk elemen yang dipilih.

$(pemilih).klik(fungsi); -> digunakan untuk melampirkan fungsi ke acara klik.

• Parameter opsional yang digunakan adalah “fungsi” yang digunakan untuk eksekusi pada terjadinya event klik.
• Nilai kembalian: Elemen yang dipilih dikembalikan yang ditentukan dengan fungsi yang akan dijalankan.

Implementasi metode klik()

1. Ketika argumen fungsi diberikan

Dalam tipe implementasi ini, sebuah fungsi diambil sebagai input dan dieksekusi setiap kali metode click() dipanggil.

• Penulisan kode berada di antara tag skrip dan di dalam badan kode HTML.
• Pemanggilan fungsi dilakukan sebagai atribut gaya h1.
• Argumen dideklarasikan dengan fungsi dan diambil sebagai fungsi secara terpisah.
• Metode beralih diterapkan pada objek menggunakan operator ini dengan penundaan 1000ms.
• Contoh metode implementasi dengan argumen fungsi yang diberikan ditunjukkan di bawah ini.

Output dari kode akan menjadi "Mengklik saya akan mengaktifkan teks!"

2. Ketika tidak ada argumen yang diberikan

Metode onclick javascript menjalankan event Sebuah elemen sudah ditetapkan ke metode. Oleh karena itu sebuah elemen dapat memanggil event onclick dari elemen lain secara terpisah. Hal ini dapat dicapai melalui langkah-langkah berikut:

1. Objek harus dideklarasikan terlebih dahulu dengan atribut gaya tertentu yang dapat diklik. Tindakan onclick harus dideklarasikan untuk objek.
2. Blok skrip akan dibuat di badan kode di mana atribusi metode click() dilakukan ke format gaya yang berbeda, p .
3. Metode onclick h1 yang sudah didefinisikan akan dipanggil dalam pemanggilan fungsi.
4. Metode onclick yang sama kemudian dipanggil untuk sebuah atribut.
5. Contoh kode yang menunjukkan implementasi metode click() tanpa argumen yang diberikan ditunjukkan di bawah ini.

Output dari kode tersebut adalah “Mengklik saya akan memanggil peringatan!”.

• • Banyak event yang bisa digunakan dalam metode $.on seperti dblclick, change, dan lain-lain.

3. Merender tombol HTML dan menambahkan teks ke halaman saat mengklik tombol. Metode Click() paling sering dilampirkan ke tombol, namun dapat dilampirkan ke elemen lain di halaman web.

• • Tombol dasar dirender dengan id "btn-primary" yang ada di dalam <div> dengan id "main.
  • Melalui kode, konten baru akan ditampilkan dengan kelas "konten baru" di tag <p> setelah mengklik tombol.
  • jQuery terlampir di dalam tag <script>.

• • Metode click() dilampirkan ke id tombol dan argumen diambil sebagai fungsi panggilan balik yang merupakan fungsi anonim.
  • String "Tombol diklik" dikembalikan oleh fungsi panggilan balik.

• • Fungsi tanpa nama hanya disebut sebagai fungsi anonim dan digunakan sebagai panggilan balik sebagai argumen dari suatu metode. Untuk membangun situs web dan aplikasi responsif, fungsi anonim dan metode panggilan balik bertindak sebagai landasan.

• • Kode akan dimulai dengan tombol di dalam <div> “utama”.
  • Setelah tombol diklik, fungsi callback akan dipanggil oleh event handler karena metode click() dilampirkan ke pemilih tombol.
  • String "Tombol diklik" akan ditampilkan.
  • Kode di atas akan merender konten hanya sekali, namun untuk menampilkan string setiap kali kode diklik, append() digunakan sebagai ganti HTML().

• • Ini akan menghasilkan string tiga kali sebagai konten baru di dalam tag <p>.
  • Fungsi panggilan balik dipanggil setiap kali tombol diklik.

Kesimpulan

Fungsi fungsi onclick di jquery telah dibahas di artikel beserta kegunaan dan contohnya. Dengan hanya beberapa baris kode, fungsionalitas halaman web dapat dibuat melalui metode JavaScript onclick .

Jika Anda memiliki keinginan untuk mempelajari lebih lanjut tentang pengembangan web dan mendapatkan spesialisasi di bidang terkait lainnya, maka Anda dapat memeriksa kursus “ Master of Science in Computer Science ” yang ditawarkan oleh upGrad . Dirancang khusus untuk profesional tingkat pemula (baik pria dan wanita dalam usia 21 hingga 45 tahun), kursus akan berada di platform online dengan sesi langsung, untuk kemudahan komuter jarak jauh. Dengan lebih dari 30 proyek dan tugas, siswa akan mendapatkan manfaat dari status alumni IIIT-Bangalore dan LJMU . Jangan ragu untuk menghubungi tim kami untuk bantuan apa pun.