Event sering dipicu oleh interaksi user dengan halaman web, seperti ketika tautan atau tombol diklik, teks dimasukkan ke dalam kotak input atau text area, pemilihan dilakukan dalam kotak pilih, tombol ditekan pada keyboard, mouse pointer dipindahkan dll. Dalam beberapa kasus, Browser itu sendiri dapat memicu event, seperti load halaman dan unload event.<\/p>\n\n\n\n
jQuery meningkatkan mekanisme penanganan kejadian dasar dengan menawarkan metode acara untuk sebagian besar acara browser asli, beberapa metode ini ready(), click(), keypress(), focus(), blur(), change(),<\/em><\/strong> dll. Misalnya, untuk menjalankan beberapa kode JavaScript saat DOM sudah siap, kalian dapat menggunakan metode jQuery ready()<\/em><\/strong>, seperti ini:<\/p>\n\n\n Secara umum, event dapat dikategorikan ke dalam empat kelompok utama \u2013 mouse event, keyboard event, form event dan document\/window event. Bagian berikut ini akan memberi kalian gambaran singkat tentang semua event ini serta metode jQuery yang terkait satu per satu.<\/p>\n\n\n\n Mouse event beraksi ketika pengguna mengklik beberapa elemen, memindahkan pointer mouse dll. Berikut ini beberapa metode jQuery yang umum digunakan untuk menangani mouse event.<\/p>\n\n\n\n Metode click()<\/em><\/strong> jQuery melampirkan fungsi event handler ke elemen yang dipilih untuk\u201dclick\u201d event. Fungsi terlampir dijalankan ketika pengguna mengklik elemen itu. Contoh berikut akan menyembunyikan elemen <p><\/em><\/strong> pada halaman saat diklik.<\/p>\n\n\n Metode jQuery dblclick()<\/em><\/strong> melampirkan fungsi event handler ke elemen yang dipilih untuk \u201cdblclick\u201d<\/em> event. Fungsi terlampir dijalankan ketika pengguna mengklik dua kali pada elemen itu. Contoh berikut akan menyembunyikan elemen <p><\/em><\/strong> ketika diklik dua kali.<\/p>\n\n\n Metode hover() <\/em><\/strong>jQuery melampirkan satu atau dua fungsi event handler ke elemen yang dipilih yang dieksekusi ketika pointer mouse masuk dan meninggalkan elemen. Fungsi pertama dijalankan ketika pengguna menempatkan pointer mouse di atas suatu elemen, sedangkan fungsi kedua dieksekusi ketika pengguna memindahkan pointer mouse dari elemen tersebut.<\/p>\n\n\n\n Contoh berikut akan menyorot elemen <p><\/em><\/strong> ketika kalian meletakkan kursor di atasnya, sorotan akan dihapus ketika kalian memindahkan kursornya.<\/p>\n\n\n Tips:<\/strong> Kalian dapat menganggap metode hover()<\/em><\/strong> adalah kombinasi dari metode jQuery mouseenter()<\/em><\/strong> dan mouseleave()<\/em><\/strong>.<\/p>\n\n\n\n Metode jQuery mouseenter()<\/em><\/strong> melampirkan fungsi event handler ke elemen yang dipilih yang dieksekusi ketika mouse memasukkan elemen. Contoh berikut akan menambahkan class highlight ke elemen <p><\/em><\/strong> ketika kalian meletakkan kursor di atasnya.<\/p>\n\n\n Metode jQuery mouseleave()<\/em><\/strong> melampirkan fungsi event handler ke elemen yang dipilih yang dieksekusi ketika mouse meninggalkan elemen. Contoh berikut akan menghapus class highlight dari elemen <p><\/em><\/strong> ketika kalian memindahkan kursor tersebut.<\/p>\n\n\n Keyboard event aktif ketika pengguna menekan atau melepaskan tombol pada keyboard. Berikut adalah beberapa metode jQuery yang umum digunakan untuk meng-handle keyboard event.<\/p>\n\n\n\n Metode jQuery keypress()<\/em><\/strong> melampirkan fungsi event handler ke elemen yang dipilih (biasanya form kontrol) yang dieksekusi ketika browser menerima input keyboard dari user. Contoh berikut akan menampilkan pesan ketika keypress event dilepaskan dan berapa kali dilepaskan ketika kalian menekan tombol pada keyboard.<\/p>\n\n\n Catatan:<\/em><\/strong> keypress event mirip dengan keydown event, kecuali pengubah dan non-printing key seperti Shift, Esc, Backspace atau Delete, Tombol panah dll. Akan memicu keydown event tetapi tidak keypress event.<\/p>\n\n\n\n Metode jQuery keydown()<\/em><\/strong> melampirkan fungsi event handler ke elemen yang dipilih (biasanya membentuk kontrol) yang dieksekusi ketika user pertama kali menekan tombol pada keyboard. Contoh berikut ini akan menampilkan pesan ketika keydown event diaktifkan dan berapa kali diaktifkan ketika kalian menekan tombol pada keyboard.<\/p>\n\n\n Metode jQuery keyup()<\/em><\/strong> melampirkan fungsi event handler ke elemen yang dipilih (biasanya membentuk kontrol) yang dieksekusi ketika user melepaskan kunci pada keyboard. Contoh berikut akan menampilkan pesan ketika event keyup diaktifkan dan berapa kali diaktifkan ketika kalian menekan dan melepaskan tombol pada keyboard.<\/p>\n\n\n Tip:<\/em><\/strong> Keyboard event dapat dilampirkan ke elemen apa pun, tetapi event tersebut hanya dikirim ke elemen yang memiliki fokus. Itu sebabnya keyboard event umumnya dilampirkan ke form control seperti box input teks atau textarea.<\/p>\n\n\n\n Form event diaktifkan ketika form control menerima atau kehilangan fokus atau ketika pengguna mengubah nilai form control seperti dengan mengetikkan teks dalam input teks, pilihan opsi apa pun di kotak pilih dll. Berikut ini beberapa metode jQuery yang umum digunakan untuk meng-handle form event.<\/p>\n\n\n\n Metode jQuery change()<\/em><\/strong> melampirkan fungsi event handler ke elemen <input>, <textarea><\/em><\/strong> dan <select><\/em><\/strong> yang dieksekusi ketika nilainya berubah. Contoh berikut akan menampilkan pesan peringatan ketika kalian memilih opsi apa pun di kotak pilih dropdown.<\/p>\n\n\n Catatan:<\/em><\/strong> Untuk kotak pilih, checkboxes, dan radio button, event tersebut segera diaktifkan ketika user membuat pilihan dengan mouse, tetapi untuk input teks dan textarea event diaktifkan setelah elemen kehilangan fokus.<\/p>\n\n\n\n Metode jQuery focus()<\/em><\/strong> melampirkan fungsi event handler ke elemen yang dipilih (biasanya form control dan tautan) yang dieksekusi ketika mendapatkan fokus. Contoh berikut akan menampilkan pesan ketika input teks menerima fokus.<\/p>\n\n\n Metode jQuery blur()<\/em><\/strong> melampirkan fungsi event handler ke elemen form seperti <input>, <textarea>, <select> <\/em><\/strong>yang dieksekusi ketika kehilangan fokus. Contoh berikut akan menampilkan pesan ketika input teks kehilangan fokus.<\/p>\n\n\n Metode jQuery submit()<\/em><\/strong> melampirkan fungsi event handler ke elemen <form> <\/em><\/strong>yang dieksekusi ketika user mencoba mengirimkan formulir. Contoh berikut akan menampilkan pesan tergantung pada nilai yang dimasukkan ketika kalian mencoba mengirimkan formulir.<\/p>\n\n\n Tips:<\/em><\/strong> Formulir dapat dikirimkan baik dengan mengklik submit button, atau dengan menekan Enter saat elemen formulir tertentu memiliki fokus.<\/p>\n\n\n\n Event juga dipicu dalam situasi ketika halaman DOM (Document Object Model) siap atau ketika user mengubah ukuran atau meng-scroll jendela browser, dll. Berikut ini beberapa metode jQuery yang umum digunakan untuk meng-handle event semacam itu.<\/p>\n\n\n\n Metode jQuery ready()<\/em><\/strong> menentukan fungsi yang akan dijalankan ketika DOM terisi penuh.<\/p>\n\n\n\n Contoh berikut akan menggantikan teks paragraf segera setelah hierarki DOM telah dibangun sepenuhnya dan siap untuk dimanipulasi.<\/p>\n\n\n Metode resize()<\/em><\/strong> jQuery melampirkan fungsi event handler ke elemen window yang dieksekusi ketika ukuran jendela browser berubah.<\/p>\n\n\n\n Contoh berikut akan menampilkan lebar dan tinggi jendela browser saat ini ketika kalian mencoba untuk mengubah ukurannya dengan menarik sudut-sudutnya.<\/p>\n\n\n Metode jQuery scroll()<\/em><\/strong> melampirkan fungsi event handler ke window atau iframe dan elemen yang dapat discroll yang dieksekusi setiap kali posisi elemen scroll berubah.<\/p>\n\n\n\n Contoh berikut akan menampilkan pesan ketika kalian meng-scroll jendela browser.<\/p>\n\n\n <\/p>\n","protected":false},"excerpt":{"rendered":" Apa Itu Event? Event sering dipicu oleh interaksi user dengan halaman web, seperti ketika tautan atau tombol diklik, teks dimasukkan ke dalam kotak input atau<\/p>\n","protected":false},"author":1,"featured_media":11743,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[4425,4428,4426,4427,4423,4424],"class_list":["post-11753","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-belajar-web-design","tag-belajar-jquery-event","tag-belajar-jquery-event-pemula","tag-kursus-jquery-event-bandung","tag-kursus-jquery-event-jakarta","tag-tutorial-jquery-event","tag-tutorial-jquery-event-pemula"],"yoast_head":"\n\n<script type="text\/javascript">\n$(document).ready(function(){\n \/\/ Code to be executed\n alert("Hello World!");\n});\n<\/script>\n<\/pre><\/div>\n\n\nMouse Event<\/h5>\n\n\n\n
Metode click()<\/h5>\n\n\n\n
\n<script type="text\/javascript">\n$(document).ready(function(){\n $("p").click(function(){\n $(this).slideUp();\n });\n});\n<\/script>\n<\/pre><\/div>\n\n\nMetode dblclick()<\/h5>\n\n\n\n
\n<script type="text\/javascript">\n$(document).ready(function(){\n $("p").dblclick(function(){\n $(this).slideUp();\n });\n});\n<\/script>\n<\/pre><\/div>\n\n\nMetode hover()<\/h5>\n\n\n\n
\n<script type="text\/javascript">\n$(document).ready(function(){\n $("p").hover(function(){\n $(this).addClass("highlight");\n }, function(){\n $(this).removeClass("highlight");\n });\n});\n<\/script>\n<\/pre><\/div>\n\n\nMetode Mouseenter()<\/h5>\n\n\n\n
\n<script type="text\/javascript">\n$(document).ready(function(){\n $("p").mouseenter(function(){\n $(this).addClass("highlight");\n });\n});\n<\/script>\n<\/pre><\/div>\n\n\nMetode Mouseleave()<\/h5>\n\n\n\n
\n<script type="text\/javascript">\n$(document).ready(function(){\n $("p").mouseleave(function(){\n $(this).removeClass("highlight");\n });\n});\n<\/script>\n<\/pre><\/div>\n\n\nKeyboard Event<\/h5>\n\n\n\n
Metode keypress()<\/h5>\n\n\n\n
\n<script type="text\/javascript">\n$(document).ready(function(){\n var i = 0;\n $('input[type="text"]').keypress(function(){\n $("span").text(i += 1);\n $("p").show().fadeOut();\n });\n});\n<\/script>\n<\/pre><\/div>\n\n\nMetode keydown()<\/h5>\n\n\n\n
\n<script type="text\/javascript">\n$(document).ready(function(){\n var i = 0;\n $('input[type="text"]').keydown(function(){\n $("span").text(i += 1);\n $("p").show().fadeOut();\n });\n});\n<\/script>\n<\/pre><\/div>\n\n\nMetode keyup()<\/h5>\n\n\n\n
\n<script type="text\/javascript">\n$(document).ready(function(){\n var i = 0;\n $('input[type="text"]').keyup(function(){\n $("span").text(i += 1);\n $("p").show().fadeOut();\n });\n});\n<\/script>\n<\/pre><\/div>\n\n\nForm Event<\/h5>\n\n\n\n
Metode change()<\/h5>\n\n\n\n
\n<script type="text\/javascript">\n$(document).ready(function(){\n $("select").change(function(){\n var selectedOption = $(this).find(":selected").val();\n alert("You have selected - " + selectedOption);\n });\n});\n<\/script>\n<\/pre><\/div>\n\n\nMetode focus()<\/h5>\n\n\n\n
\n<script type="text\/javascript">\n$(document).ready(function(){\n $("input").focus(function(){\n $(this).next("span").show().fadeOut("slow");\n });\n});\n<\/script>\n<\/pre><\/div>\n\n\nMetode blur()<\/h5>\n\n\n\n
\n<script type="text\/javascript">\n$(document).ready(function(){\n $("input").blur(function(){\n $(this).next("span").show().fadeOut("slow");\n });\n});\n<\/script>\n<\/pre><\/div>\n\n\nMetode submit()<\/h5>\n\n\n\n
\n<script type="text\/javascript">\n$(document).ready(function(){\n $("form").submit(function(event){\n var regex = \/^[a-zA-Z]+$\/;\n var currentValue = $("#firstName").val();\n if(regex.test(currentValue) == false){\n $("#result").html('<p class="error">Not valid!<\/p>').show().fadeOut(1000);\n \/\/ Preventing form submission\n event.preventDefault();\n }\n });\n});\n<\/script>\n<\/pre><\/div>\n\n\nDocument\/Window Event<\/h5>\n\n\n\n
Metode ready()<\/h5>\n\n\n\n
\n<script type="text\/javascript">\n$(document).ready(function(){\n $("p").text("The DOM is now loaded and can be manipulated.");\n});\n<\/script>\n<\/pre><\/div>\n\n\nMetode resize()<\/h5>\n\n\n\n
\n<script type="text\/javascript">\n$(document).ready(function(){\n $(window).resize(function() {\n $(window).bind("resize", function(){ \n $("p").text("Window width: " + $(window).width() + ", " + "Window height: " + $(window).height());\n });\n });\n});\n<\/script>\n<\/pre><\/div>\n\n\nMetode scroll()<\/h4>\n\n\n\n
\n<script type="text\/javascript">\n$(document).ready(function(){\n $(window).scroll(function() {\n $("p").show().fadeOut("slow");\n });\n});\n<\/script>\n<\/pre><\/div>\n\n\n