Javascript Stoppropagation ve Prevent Default Kullanımı ve Farkı

Js preventdefault & stoppropagation

Herkese merhabalar bu yazımızda sizlerle beraber Javascript içerisindeki stopPropagation ve preventDefault kavramlarını ele alıyor olacağız.

Öncelikle preventDefaulta bir göz atalım ;

Preventdefault kavramı ilgili elementin tarayıcı tarafından o an yaptığı varsayılan işlemi engellemeye yarar. Örneğin a elementine tıklandığı zaman varsayılan davranışı ilgili url adresine yönlenmektir bu davranışı engellemek için preventdefault kullanırız.

<a href="https://www.google.com/" id='google'>Google Git</a>
<script>
const google=document.getElementById('google')
google.addEventListener('click',(e)=>{
e.preventDefault();
alert("Gidemezsin")
})
</script>

yukarıdaki kod ile a elementine tıklanıldığı zaman varsayılan davranışını engelledik.

Şimdide stopPropagation kavramına bakalım ;

Stoppropagation kavramı ise tetiklenen olay zincirlerini keser.Ne demek tetiklenen olay zincirlerini keser diyecek olursak, örneğin iç içe iki elementimizin oldugunu düşünelim şu şekilde mesela

div 2 elementine tıkladığım zaman eğer div1 elementi için örn click eventi tanımlandıysa ilgili click eventi de tetiklenecektir peki biz bunu istiyor muyuz .Cevap tabikii hayır işte bunun için stoppropagation kavramını kullanarak ilgili olaylar zincirini koparabilir ve baloncuk etkisinden kurtulmuş oluruz.

<div id="div1" onclick="div1click(event)">
Div 1
<div id='div2' onclick="div2click(event)">
Div 2
</div>
</div>
<script>
function div1click(event){
alert('div 1 tıklandı')
}
function div2click(event){
alert('div 2 tıklandı')
event.stopPropagation();
}
</script>

yukarıda örnekteki gibi ilgili zinciri engelleyebiliriz.

Herkese İyi Çalışmalar Dilerim.