Событие Javascript объединило 3 метода. Bu 3 метод cok onemli 3 durumu kontrol etmemizi sagliyor. Недир бу 3 дурум?

Орнегин html dokumanimizda bir div objesi ve bu div icinde bir флажок umuz olsun

<div>
 <input type="checkbox" class="my-checkbox"> Checkbox </input>
</div>

Javascript kodumuzda checkboxumuz icin iki click eventimiz oldugunu dusunun. biri checkboxumuzu class ismi .my-checkbox ile secip click eventi eklemis, digeri ise tum input elemanlari icin click eventi eklemis. яни артик ввод elemani icin iki tane event eklenmis oldu.

$('.my-checkbox').on('click', (event)=>{
    console.log('my-checkbox click');
});
$('input').on('click', (event)=>{
    console.log('checkbox click');
});

simdi bu input elemani tiklandiginda konsola iki mesajida yazacaktir cunku iki event de tetiklenecektir. Iste buna пузырящийся deniliyor.

my-checkbox click
checkbox click

Peki biz sadece bir eventin tetiklenmesini, diger eventlerin tetiklenmemesini istersek ne olacak?

$('.my-checkbox').on('click', (event)=>{
    console.log('my-checkbox click');
    event.stopImmediatePropagation();
});

calismasini istedigimiz event icinde stopImmediatePropagation() kullanacagiz. Boylece sadece o событие tetiklenevek diger eventler engellenecektir, yani событие пузырение engellenmis olacaktir.

Peki bir event de input elemanini sarmalayan div elemani icin var ise? яни javascript kodumuz su sekilde ise

$('.my-checkbox').on('click', (event)=>{
    console.log('my-checkbox click');
});
$('input').on('click', (event)=>{
    console.log('checkbox click');
});
$('div').on('click', (event)=>{
    console.log('div click');
});

флажок elemanina tikladigimiza konsola su yazi yazacaktir

my-checkbox click
checkbox click
div click

Яни Хем ввод elemani icin tum eventler tetiklenecek hem de onu sarmalayan dom elemani icin tum eventler tetiklenecek. Bunu engellemek icin ise;

$('.my-checkbox').on('click', (event)=>{
    console.log('my-checkbox click');
    event.stopImmediatePropagation();
    event.stopPropagation();
});

boylece event.stopPropagation() ile подол mevcut elemani uzerindeki подол де ону sarmalayan elemanlar ile ilgili событие пузырится engellenmis olur.

Бунун янинда озелликле eklemesek de bazi dom elemanlarinin uzerinde standart eventler vardir. флажок ornegin elemani tiklandiginda браузер tarafindan флажок isaratlenir. бу да бир eventtir, ве бу elemanin стандартный eventidir. biz stopPropagation() veya stopImmediatePropagation() cagirsak da bu event her sekilde calisir ve checkbox isaretlenir. Bunu engellemek icin ise event.preventDefatult() kullaniriz.

$('.my-checkbox').on('click', (event)=>{
    console.log('my-checkbox click');
    event.stopImmediatePropagation();
    event.stopPropagation();
    event.preventDefault();
});

boylece ne стандартное событие olan checkbox isaretleyen event calisacaktir, ne de diger bubbing eventler calisacaktir. sadece konsola ‘my-checkbox click’ yazacaktir. Diger Tum Eventler engellenmis olacaktir.

Bir de jquery icin bir diger alternatif yontem ise false degeri donmektir. Bu event.preventDefault() methoddu yerine kullanilabilir, ama bloling bu sekilde engellenmez.

$('.my-checkbox').on('click', (event)=>{
    console.log('my-checkbox click');
    return false;
});

bu kodda tiklansa da isaretlenmeyecektir tiklansa da isaretlenmeyecektir.

my-checkbox click
checkbox click
div click