javascript dom : prevent Default & event bubbling
javascript dom : prevent Default & event bubbling
1.Prevent Default itu bagaimana cara kita menghentikan aksi default yang dilakukan oleh element web kita
Prevent Default ini adalah sebuah methode yang ada di dalam object event tujuannya adalah untuk menghentikan aksi default yang dilakukan oleh sebuah element
Misal kita punya element a yang di tangkap menggunakan javascript dan di simpan ke variabel close dengan href kosong , jika close ini di tekan karena href nya kosong otomatis browser nya ga akan pindah ke mana mana tapi dia merefres halaman nya nah untuk menghentikan aksi tersebut di butuhkan lah prevent Default
Contoh code
di html
< a href=" " class= "close" >close</>
di js
const close = document.getElementsByClassName('close'[0];
close.forEach(function(el) {
el.addEventListener('click' , function (e){
e.target.parentElement.style.display = 'none;
e.preventDefault();
});
});
Jadi preventDefault itu adalah cegah aksi default nya
Nah sekarang kita masuk ke yang dua yaitu
2.event bubbling
Gelembung peristiwa adalah jenis propagasi peristiwa DOM di mana peristiwa tersebut pertama kali dipicu pada elemen target terdalam, lalu secara berturut-turut memicu leluhur elemen target dalam hierarki bersarang yang sama hingga mencapai elemen DOM terluar atau objek dokumen
Bisa di lihat di youtube untuk contoh event bubbling
Metode stopPropagation() akan dibahas dalam artikel ini bersama dengan contoh kode yang berguna. Setelah itu, kita akan melihat perbedaan antara Metode stopPropagation() dan PreventDefault().
stopPropagation() event method- Elemen induk tidak dapat mengakses acara menggunakan metode ini. Secara umum, fungsi ini dibuat untuk mencegah penyebaran beberapa panggilan ke acara yang sama. Misalnya, jika elemen tombol terkandung dalam tag div dan keduanya memiliki peristiwa onclick, setiap kali kita mencoba mengaktifkan peristiwa yang terkait dengan elemen tombol, peristiwa yang terkait dengan elemen div juga diaktifkan karena elemen div ini adalah memang induk dari elemen tombol.
Sintaksis
event.stopPropagation();
Metode stopPropagation(), yang akan menghentikan akses induk ke acara, dapat digunakan untuk mengatasi masalah ini.
Contoh code
<!DOCTYPE html>
<html>
<title>What is the use of stopPropagation method in JavaScript - TutorialsPoint</title>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
padding: 50px;
background-color: rgba(10, 111, 134, 0.2);
text-align: center;
cursor: pointer;
}
</style>
<!-- jQuery library -->
<script src="https://code.jquery.com/jquery-git.js"></script>
</head>
Setelah Anda mengklik div luar "DIV Kedua saya (2)" kotak konfirmasi hanya ditampilkan sekali seperti yang ditunjukkan di bawah ini.
Selanjutnya, jika Anda mengklik div bagian dalam “DIV Pertama saya (1)” kotak konfirmasi akan muncul dua kali seperti yang ditunjukkan di bawah ini.
Selanjutnya, setelah Anda mengklik tombol ok, ini akan menampilkan div luar "DIV Kedua saya (2)" di kotak konfirmasi.
Setiap kali kotak centang telah dipilih dan klik div bagian dalam “DIV Pertama saya (1)” seperti yang terlihat pada gambar di bawah. Kotak konfirmasi hanya muncul sekali.
Contoh 2
Dalam contoh ini mari kita memahami bagaimana metode event.stopPropagation() diimplementasikan, yang akan menyebabkan fungsi tunggal elemen tombol dijalankan.
Contoh code
<!DOCTYPE html>
<html>
<title>What is the use of stopPropagation method in JavaScript - TutorialsPoint</title>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
div {
padding: 50px;
background-color: rgba(63, 65, 45, 0.2);
text-align: center;
}
</style>
<!-- jQuery library -->
<script src="https://code.jquery.com/jquery-git.js"></script>
</head>
<body>
<h3>The button element's single function will be executed with stopPropagation() Method
</h3>
<p>Test the result by clicking the button as shown below in the color boxe:</p>
<div class="first" onclick="functionFirst()">
<button type="button" class="btn btn-success btn-lg" onclick="functionSecond()">
Button
preventDefault() Method- Ini adalah metode yang ditemukan di antarmuka acara. Dengan menggunakan metode ini, browser dicegah melakukan tindakan default elemen yang dipilih. Hanya jika acara tersebut dapat dibatalkan barulah teknik ini dapat melakukannya. Peristiwa gulir dan roda, misalnya, merupakan beberapa contoh peristiwa yang tidak dapat dihindari.
Sintaksis
preventDefault() Method
Contoh 3
Mari kita pahami cara menghentikan tautan mengikuti URL dalam contoh ini sehingga browser tidak dapat mengakses halaman lain.
Contoh code
<!DOCTYPE html>
<html>
<title>What is the use of stopPropagation method in JavaScript - TutorialsPoint</title>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Using jquery library -->
<script src="https://code.jquery.com/jquery-git.js"></script>
</head>
<body>
<a id="myLink" href="www.tutorialspoint.com">
Welcome to Tutorialspoint!
</a>
<script>
$("#myLink").click(function() {
event.preventDefault();
alert("This event is prevented, you can't visit the URL.");
});
</script>
</body>
</html>
Klik tautan tersebut dan Anda akan melihat kotak konfirmasi yang bertuliskan "Acara ini dicegah, Anda tidak dapat mengunjungi URL-nya."
Komentar
Posting Komentar