Menghentikan Propagasi Peristiwa
Pahami .stopPropagation() dan .preventDefault() untuk mengendalikan alur peristiwa, mencegah tindakan bawaan peramban, dan mengelola interaksi peristiwa yang kompleks secara efektif.
Menghentikan Propagasi Peristiwa adalah pelajaran jQuery Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 3. 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 3 pelajaran total.
Kendalikan Peristiwa Anda!
Peristiwa seperti klik atau pengiriman formulir tidak hanya terjadi pada satu elemen. Peristiwa tersebut sering kali berjalan melalui Document Object Model (DOM).
Mempelajari cara mengendalikan alur ini adalah kunci untuk membuat halaman web yang interaktif dan memiliki perilaku yang tepat.
Mencegah Tindakan Bawaan
Peramban memiliki tindakan bawaan untuk banyak elemen HTML. Contohnya:
- Mengklik tag
<a>akan mengarahkan ke halaman baru. - Mengirimkan
<form>akan memuat ulang halaman.
Kita menggunakan event.preventDefault() untuk menghentikan perilaku bawaan peramban ini.
`preventDefault()` dalam Praktik
Coba klik tautan di bawah ini. Biasanya, tautan tersebut akan membawa Anda ke example.com, tetapi .preventDefault() menghentikan navigasi itu!
<!DOCTYPE html>
<html>
<head>
<title>Prevent Default</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<h1>Prevent Default Example</h1>
<a href="https://example.com" id="myLink">Click Me! (Should not navigate)</a>
<div id="output"></div>
<script>
$(document).ready(function() {
$('#myLink').on('click', function(event) {
event.preventDefault(); // Stop the link from navigating
$('#output').append('<p>Link click prevented! You\'re still here.</p>');
});
});
</script>
</body>
</html>Memahami Penggelembungan Peristiwa
Ketika peristiwa terjadi pada sebuah elemen (seperti klik), peristiwa tersebut tidak hanya memicu penangan pada elemen itu. Peristiwa tersebut juga "menggelembung" ke atas melalui pohon DOM.
- Peristiwa memicu penangan pada elemen induknya.
- Kemudian pada kakek induknya.
- Dan seterusnya, hingga ke
<body>dan<html>.
Perjalanan ke atas ini disebut penggelembungan peristiwa.
Hentikan Gelembung: `stopPropagation()`
Terkadang, Anda ingin peristiwa hanya ditangani oleh elemen tempat peristiwa itu berasal, atau oleh induk tertentu, tanpa memengaruhi elemen pada tingkat yang lebih tinggi.
Di sinilah event.stopPropagation() digunakan. Ini menghentikan peristiwa agar tidak terus menggelembung ke atas pohon DOM.
Contoh `stopPropagation()`
Klik kotak bagian dalam. Tanpa stopPropagation(), kedua pesan akan muncul. Dengan fungsi tersebut, hanya pesan kotak bagian dalam yang muncul karena penggelembungan dihentikan.
<!DOCTYPE html>
<html>
<head>
<title>Stop Propagation</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
#outer {
padding: 20px;
background-color: lightblue;
border: 1px solid blue;
margin: 10px;
}
#inner {
padding: 20px;
background-color: lightcoral;
border: 1px solid red;
margin-top: 10px;
}
</style>
</head>
<body>
<h1>Stop Propagation Example</h1>
<div id="outer">
Outer Div (Click me!)
<div id="inner">
Inner Div (Click me!)
</div>
</div>
<div id="log"></div>
<script>
$(document).ready(function() {
$('#outer').on('click', function() {
$('#log').append('<p>Outer Div clicked!</p>');
});
$('#inner').on('click', function(event) {
event.stopPropagation(); // Stop bubbling here
$('#log').append('<p>Inner Div clicked!</p>');
});
});
</script>
</body>
</html>Penerapan Praktis Penghentian Penggelembungan
stopPropagation() berguna dalam skenario seperti:
- Dialog modal: Mencegah klik di dalam modal menutupnya dengan memicu klik pada lapisan penutup.
- Menu tarik-turun bertingkat: Menjaga menu tarik-turun anak tetap terbuka ketika induknya diklik.
- Komponen UI kompleks: Memastikan penangan peristiwa untuk komponen tertentu tidak mengganggu listener global.
Objek Peristiwa
.preventDefault() dan .stopPropagation() adalah metode dari objek peristiwa. Objek ini diteruskan sebagai argumen ke fungsi penangan peristiwa Anda.
Objek peristiwa berisi banyak informasi berguna tentang peristiwa yang terjadi, seperti jenisnya, elemen target, dan koordinat tetikus.
<!DOCTYPE html>
<html>
<head>
<title>Event Object</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<h1>Event Object Properties</h1>
<button id="myButton">Click Me</button>
<div id="output"></div>
<script>
$(document).ready(function() {
$('#myButton').on('click', function(event) {
$('#output').empty(); // Clear previous output
$('#output').append('<p>Event Type: <code>' + event.type + '</code></p>');
$('#output').append('<p>Target Element ID: <code>' + event.target.id + '</code></p>');
$('#output').append('<p>Mouse X Position: <code>' + event.pageX + '</code></p>');
$('#output').append('<p>Mouse Y Position: <code>' + event.pageY + '</code></p>');
});
});
</script>
</body>
</html>Menggabungkan Kedua Metode
Terkadang, Anda perlu menggunakan .preventDefault() dan .stopPropagation() sekaligus. Keduanya menyelesaikan masalah yang berbeda:
.preventDefault(): Menghentikan tindakan bawaan peramban..stopPropagation(): Menghentikan peristiwa agar tidak berjalan ke atas melalui DOM.
Contohnya, sebuah tombol di dalam komponen kompleks mungkin perlu mencegah perilaku klik bawaannya DAN menghentikan klik tersebut agar tidak memicu penangan pada elemen induk.
Memahami Pengendalian Peristiwa
Anda memiliki tautan <a href="#" id="link"> di dalam div <div id="container">. Anda ingin mencegah tautan melakukan navigasi dan juga mencegah peristiwa klik memicu penangan apa pun pada #container.
Ringkasan: Pengendalian Peristiwa
Kerja bagus! Anda telah belajar menguasai alur peristiwa:
.preventDefault(): Menghentikan tindakan bawaan peramban untuk suatu peristiwa (misalnya navigasi tautan dan pengiriman formulir)..stopPropagation(): Mencegah peristiwa menggelembung ke atas pohon DOM menuju elemen induk.
Metode-metode hebat ini memberi Anda kendali yang tepat atas perilaku peristiwa dalam aplikasi web, sehingga pengalaman pengguna menjadi lebih dapat diprediksi dan tangguh.
Belajar JavaScript dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 22
- Pelajaran
- 48
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Menghentikan Propagasi Peristiwa” gratis?
Ya — teks lengkap “Menghentikan Propagasi 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 3 pelajaran total.
Apa yang akan aku pelajari di “Menghentikan Propagasi Peristiwa”?
Pahami .stopPropagation() dan .preventDefault() untuk mengendalikan alur peristiwa, mencegah tindakan bawaan peramban, dan mengelola interaksi peristiwa yang kompleks secara efektif. 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 2 dari 3.
Berapa lama pelajaran “Menghentikan Propagasi 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.
Semua pelajaran dalam kursus ini
- Menerapkan Delegasi Peristiwa yang Tangguh
- Menghentikan Propagasi Peristiwa
- Membuat dan Memicu Peristiwa Kustom