Pengelolaan Peristiwa
Pengelolaan Peristiwa
Pengelolaan Peristiwa adalah pelajaran jQuery Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 1. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar jQuery Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus jQuery Academy mencakup 1 pelajaran total.
Pengantar
Halo,
Saat memperkenalkan jQuery, kita mengatakan bahwa jQuery tidak hanya digunakan untuk memanipulasi DOM, tetapi juga memiliki fitur penting seperti pengelolaan peristiwa.
apa itu peristiwa
Pertama, mari kita pelajari apa itu peristiwa.
Peristiwa sebagian besar dihasilkan oleh pengguna di peramban web.
Kita dapat mendefinisikan banyak peristiwa yang dipicu pengguna, seperti pengguna seluler menyentuh layar, pengguna web menggerakkan tetikus, mengeklik tombol, dan menggulir dengan tetikus.
Karena JavaScript adalah bahasa pemrograman, kita akan mengatur alur program berdasarkan peristiwa yang terjadi.
Klik
metode click()
Mari kita mulai dengan peristiwa paling sederhana, yaitu peristiwa klik tombol.
Metode click() digunakan untuk mengelola peristiwa klik kita dalam HTML.
Kita dapat mendengarkan peristiwa klik dengan sintaks berikut.
$(selector).click(handler);
- Dengan $(selector), kita memilih elemen yang akan didengarkan.
- Handler mewakili fungsi callback yang akan dijalankan saat terjadi klik.
Mari kita buat contohnya.
<button>Button</button>
<script>
/* Callback will run as son as
the DOM is loaded
*/
$(document).ready(function(){
$('button').click(function(){
alert('Button clicked');
});
})
</script>Peringatan
Metode click menangani klik tombol dengan fungsi anonim yang diterimanya sebagai argumen.
Klik Ganda
Peristiwa Tetikus
Berikut adalah beberapa peristiwa yang dapat dibuat pengguna dengan tetikus.
Mari kita klik tombolnya!
<button>Coddy Button</button>
<script>
// runs when button is click
$("button").click(function(){
$('button').text('Clicked')
});
// runs when button is double click
$("button").dblclick(function(){
$('button').text('Double Clicked')
});
</script>Peristiwa tetikus
Perhatikan bahwa beberapa peristiwa tidak dapat diuji di aplikasi seluler, karena peristiwa seperti Hover tidak dapat dilakukan pada perangkat seluler!
<button>Coddy Button</button>
<script>
/* It runs when the mouse
hovers over the button
*/
$("button").hover(function(){
$('button').text('Hovering...')
});
/*
It runs when the mouse
enters an element
*/
$("button").mouseenter(function(){
$('button').text('Mouse enter...')
});
/*
It runs when the mouse leaves
an element
*/
$("button").mouseleave(function(){
$('button').text('Mouse Leave...')
});
</script>Peristiwa papan ketik
Peristiwa Papan Ketik
Sekarang kita akan mempelajari cara menangani peristiwa papan ketik.
Pertama, mari kita definisikan input, lalu tangani peristiwa yang dihasilkan oleh input tersebut.
<input type="text" id="name"
name="yourname"
placeholder="Enter your name" />
<p>Keyboard event: <span id="state"></span></p>
<script>
/*
Callback will run as son as
the DOM is loaded
*/
$(document).ready(function(){
/*
It runs every time we press
the keyboard key on the keyboard.
*/
$('#name').keydown(function(){
$('#state').text('Key down')
});
/*
It runs when we take our finger
off the keyboard key
*/
$('#name').keyup(function(){
$('#state').text('Key up')
});
// Runs when the user focuses on input.
$('#name').focus(function(){
$('#state').text('Focus')
});
/*
It works when we unfocus
from an input on the keyboard.
*/
$('#name').blur(function(){
$('#state').text('Blur')
});
})
</script>Peristiwa Formulir
Dengan jQuery, kita juga dapat mengelola peristiwa yang terjadi dalam formulir.
Perilaku seperti memasukkan data ke dalam input atau membuat pilihan dari kotak pilihan merupakan peristiwa formulir.
Contoh peristiwa formulir
Pada kode di bawah ini, lebih dari satu peristiwa formulir dicontohkan.
*
listen to the form with the coddyForm
id and run when submit button clicked
*/
$("#coddyForm").submit(
function(event){
});peristiwa window
Terakhir, mari kita lihat peristiwa window.
Mungkin peristiwa window yang paling penting adalah $(document).ready(), tetapi karena kita telah mempelajari peristiwa ini sebelumnya, kita akan mempelajari peristiwa window lainnya.
metode resize
metode resize()
Metode resize terhubung ke objek window peramban dan dipicu ketika ukuran jendela berubah.
const window = {};
const $ = (obj) => ({
resize: (callback) => {
console.log("Resize event handler would be attached here.");
}
});
$(window).resize(function() {
//trigging when user change windows size
});metode scroll
Metode scroll()
Metode scroll() terhubung ke elemen yang dapat digulir atau objek window dan dipicu ketika pengguna menggulir komponen terkait.
$(window).scroll(function() {
//Calling when user scroll the window
});
$('#my-scrollable-element').scroll(function() {
//Calling when user scroll the cursor
//that inside the #my-scrollable-element element
});Selamat
Selamat 🎉
Kita telah mempelajari Pengelolaan Peristiwa dalam jQuery.
Pada bagian berikutnya, kita akan mempelajari pelajaran Membuat Animasi dengan jQuery.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Pengelolaan Peristiwa” gratis?
Ya — teks lengkap “Pengelolaan Peristiwa” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus jQuery Academy, upgrade ke CoddyKit PRO. Kursus jQuery Academy mencakup 1 pelajaran total.
Apa yang akan aku pelajari di “Pengelolaan Peristiwa”?
Pengelolaan Peristiwa Kamu berlatih jQuery Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai jQuery Academy?
Tidak diperlukan pengalaman sebelumnya. jQuery Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 1.
Berapa lama pelajaran “Pengelolaan Peristiwa” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran jQuery Academy ini?
Ya. Setiap pelajaran jQuery Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.