JavaScript etkinlik ayrıntılı incelemesi

preventDefault ve stopPropagation: Hangi yöntemin ne zaman kullanılacağı ve her yöntemin tam olarak ne işe yaradığı.

JavaScript etkinliklerini işleme genellikle basittir. Bu durum özellikle basit (nispeten düz) bir HTML yapısıyla çalışırken geçerlidir. Ancak etkinlikler bir öğe hiyerarşisinde ilerlediğinde (veya yayıldığında) işler biraz daha karmaşık hale gelir. Bu genellikle geliştiricilerin yaşadıkları sorunları çözmek için stopPropagation() ve/veya preventDefault() ile iletişime geçtiği zaman olur. "preventDefault()'yi deneyeceğim. Bu işe yaramazsa stopPropagation()'yi deneyeceğim. Bu da işe yaramazsa ikisini birden deneyeceğim." diye düşünüyorsanız bu makale tam size göre. Her yöntemin ne işe yaradığını ve ne zaman kullanılacağını tam olarak açıklayacağım. Ayrıca, keşfedebileceğiniz çeşitli çalışma örnekleri de sunacağım. Kafanızı karıştıran konuları bir kez daha açıklamak isterim.

Ancak çok ayrıntılı incelemeye geçmeden önce, JavaScript'te mümkün olan iki tür etkinlik işleme yöntemine kısaca değinmek önemlidir (tüm modern tarayıcılarda. 9 sürümünden önceki Internet Explorer, etkinlik yakalamayı hiç desteklemiyordu).

Etkinlik stilleri (yakalama ve kabarcık oluşturma)

Tüm modern tarayıcılar etkinlik yakalamayı destekler ancak geliştiriciler tarafından çok nadiren kullanılır. İlginç bir şekilde, Netscape'in başlangıçta desteklediği tek etkinlik türü buydu. Netscape'in en büyük rakibi Microsoft Internet Explorer, etkinlik yakalamayı hiç desteklemiyordu. Bunun yerine, yalnızca etkinlik kabarcıklaşması adı verilen başka bir etkinlik stilini destekliyordu. W3C kurulduktan sonra, her iki etkinlik stilinin de avantajlı olduğunu fark etti ve addEventListener yöntemine üçüncü bir parametre ekleyerek tarayıcıların her ikisini de desteklemesi gerektiğini açıkladı. Bu parametre başlangıçta yalnızca bir boole idi ancak tüm modern tarayıcılar üçüncü parametre olarak bir options nesnesini destekler. Bu nesneyi, etkinlik yakalamayı kullanmak isteyip istemediğinizi belirtmek (diğerlerinin yanı sıra) için kullanabilirsiniz:

someElement.addEventListener('click', myClickHandler, { capture: true | false });

options nesnesi ve capture özelliğinin isteğe bağlı olduğunu unutmayın. Bunlardan biri atlanırsa capture için varsayılan değer false olur. Bu, etkinlik kabarcıklaşmasının kullanılacağı anlamına gelir.

Etkinlik yakalama

Etkinlik işleyicinizin "yakalama aşamasında dinleme" durumunda olması ne anlama gelir? Bunu anlamak için etkinliklerin nasıl oluştuğunu ve nasıl yayıldığını bilmemiz gerekir. Geliştirici olarak bu etkinliklerden yararlanmıyor, önemsemiyor veya bunlar hakkında düşünmüyor olsanız bile aşağıdakiler tüm etkinlikler için geçerlidir.

Tüm etkinlikler pencerede başlar ve ilk olarak yakalama aşamasından geçer. Bu, bir etkinlik gönderildiğinde pencereyi başlattığı ve önce hedef öğesine doğru "aşağıya" doğru ilerlediği anlamına gelir. Bu durum, yalnızca kabarcık aşamasında dinliyor olsanız bile gerçekleşir. Aşağıdaki örnek işaretlemeyi ve JavaScript'i inceleyin:

<html>
 
<body>
   
<div id="A">
     
<div id="B">
       
<div id="C"></div>
     
</div>
   
</div>
 
</body>
</html>
document.getElementById('C').addEventListener(
 
'click',
 
function (e) {
    console
.log('#C was clicked');
 
},
 
true,
);

Kullanıcı #C öğesini tıkladığında window kaynağından bir etkinlik gönderilir. Bu etkinlik, aşağıdaki şekilde alt öğelerine dağıtılır:

Hedefe ulaşana kadar window => document => <html> => <body> => ve benzeri.

window veya document veya <html> öğesinde ya da <body> öğesinde (veya hedefine giden başka bir öğede) tıklama etkinliği dinleyen bir öğe olup olmadığı önemli değildir. Etkinlik yine window'te başlar ve yolculuğunu az önce açıklandığı gibi başlatır.

Örneğimizde tıklama etkinliği, window ile #C arasındaki her öğe aracılığıyla window'dan hedef öğesine (bu durumda #C) yayılmaya (bu, doğrudan stopPropagation() yönteminin işleyiş şekliyle bağlantılı olduğu için önemli bir kelimedir ve bu belgenin ilerleyen bölümlerinde açıklanacaktır) devam eder.

Bu, tıklama etkinliğinin window'te başlayacağı ve tarayıcının aşağıdaki soruları soracağı anlamına gelir:

"Yakalama aşamasında window üzerinde tıklama etkinliği dinleyen bir şey var mı?" Bu durumda, uygun etkinlik işleyiciler tetiklenir. Örneğimizde hiçbir şey yok, bu nedenle hiçbir işleyici tetiklenmez.

Ardından etkinlik document'ye yayılır ve tarayıcı şu soruyu sorar: "document'de yakalama aşamasında tıklama etkinliği için dinleyen bir şey var mı?" Bu durumda, uygun etkinlik işleyicileri tetiklenir.

Ardından etkinlik <html> öğesine yayılılır ve tarayıcı şu soruyu sorar: "Kayıt aşamasında <html> öğesinde tıklama dinleyen bir şey var mı?" Bu durumda, uygun etkinlik işleyicileri tetiklenir.

Ardından etkinlik <body> öğesine yayılır ve tarayıcı şu soruyu sorar: "Kayıt aşamasında <body> öğesinde tıklama etkinliği dinleyen bir şey var mı?" Bu durumda, uygun etkinlik işleyiciler tetiklenir.

Ardından etkinlik, #A öğesine yayılır. Tarayıcı yine şunu sorar: "Yakalama aşamasında #A üzerinde tıklama etkinliği dinleyen bir şey var mı? Varsa uygun etkinlik işleyicileri tetiklenir.

Ardından etkinlik, #B öğesine yayılır (ve aynı soru sorulur).

Son olarak etkinlik hedefine ulaşır ve tarayıcı şu soruyu sorar: "Yakalama aşamasında #C öğesinde tıklama etkinliği dinleyen bir şey var mı?" Bu sefer cevabımız "evet". Etkinliğin hedefte olduğu bu kısa süre, "hedef aşaması" olarak bilinir. Bu noktada, etkinlik işleyici tetiklenir, tarayıcı "#C tıklandı" ifadesini console.log ile gösterir ve işimiz biter, değil mi? Yanlış! Henüz işimiz bitmedi. Süreç devam eder ancak bu aşamada kabarcıklanma aşamasına geçer.

Etkinlik kabarcıklaşması

Tarayıcı şunları sorar:

"Taşma aşamasında #C üzerinde tıklama etkinliği dinleyen bir şey var mı?" Bu konuya dikkat edin. Tıklamaları (veya herhangi bir etkinlik türünü) hem yakalama hem taşma aşamalarında dinlemek tamamen mümkündür. Her iki aşamada da etkinlik işleyicileri bağladıysanız (ör. .addEventListener() öğesini bir kez capture = true ile ve bir kez capture = false ile çağırarak) evet, her iki etkinlik işleyici de kesinlikle aynı öğe için tetiklenir. Ancak bu işlemlerin farklı aşamalarda (biri yakalama aşamasında, diğeri kabarcık oluşturma aşamasında) tetiklendiğini de unutmayın.

Ardından etkinlik, üst öğesi #B'ye yayılılır (etkinliğin DOM ağacında "yukarı" doğru ilerlediği anlaşıldığı için daha yaygın olarak "taşma" olarak belirtilir) ve tarayıcı şu soruyu sorar: "Taşma aşamasında #B'de tıklama etkinliklerini dinleyen bir şey var mı?" Örneğimizde hiçbir şey yok, bu nedenle hiçbir işleyici tetiklenmez.

Ardından etkinlik #A'e aktarılır ve tarayıcı şu soruyu sorar: "#A'te kabarcıklanma aşamasında tıklama etkinliklerini dinleyen bir şey var mı?"

Ardından etkinlik <body>'e doğru yayılır: "Yayılma aşamasında <body> öğesinde tıklama etkinliklerini dinleyen bir şey var mı?"

Ardından <html> öğesi: "Bulanıklaştırma aşamasında <html> öğesinde tıklama etkinliklerini dinleyen bir şey var mı?

Ardından document: "Bulanıklaştırma aşamasında document üzerinde tıklama etkinliklerini dinleyen bir şey var mı?"

Son olarak window: "Bulanıklaştırma aşamasında pencerede tıklama etkinliklerini dinleyen bir şey var mı?"

Bora Uzun bir yolculuk oldu ve etkinliğimiz şu anda çok yorgun olabilir. Ancak inanın her etkinlik bu yolculuktan geçer. Geliştiriciler genellikle yalnızca bir etkinlik aşamasıyla ilgilendiği için (genellikle de kabarcıklanma aşamasıyla) bu durum çoğu zaman fark edilmez.

Etkinlik yakalama ve etkinlik kabartmayı denemek ve işleyiciler tetiklenirken konsola bazı notlar kaydetmek için biraz zaman ayırmanız faydalı olacaktır. Bir etkinliğin izlediği yolu görmek çok faydalıdır. Aşağıda, her iki aşamadaki her öğeyi dinleyen bir örnek verilmiştir.

<html>
 
<body>
   
<div id="A">
     
<div id="B">
       
<div id="C"></div>
     
</div>
   
</div>
 
</body>
</html>
document.addEventListener(
 
'click',
 
function (e) {
    console
.log('click on document in capturing phase');
 
},
 
true,
);
// document.documentElement == <html>
document
.documentElement.addEventListener(
 
'click',
 
function (e) {
    console
.log('click on <html> in capturing phase');
 
},
 
true,
);
document
.body.addEventListener(
 
'click',
 
function (e) {
    console
.log('click on <body> in capturing phase');
 
},
 
true,
);
document
.getElementById('A').addEventListener(
 
'click',
 
function (e) {
    console
.log('click on #A in capturing phase');
 
},
 
true,
);
document
.getElementById('B').addEventListener(
 
'click',
 
function (e) {
    console
.log('click on #B in capturing phase');
 
},
 
true,
);
document
.getElementById('C').addEventListener(
 
'click',
 
function (e) {
    console
.log('click on #C in capturing phase');
 
},
 
true,
);

document
.addEventListener(
 
'click',
 
function (e) {
    console
.log('click on document in bubbling phase');
 
},
 
false,
);
// document.documentElement == <html>
document
.documentElement.addEventListener(
 
'click',
 
function (e) {
    console
.log('click on <html> in bubbling phase');
 
},
 
false,
);
document
.body.addEventListener(
 
'click',
 
function (e) {
    console
.log('click on <body> in bubbling phase');
 
},
 
false,
);
document
.getElementById('A').addEventListener(
 
'click',
 
function (e) {
    console
.log('click on #A in bubbling phase');
 
},
 
false,
);
document
.getElementById('B').addEventListener(
 
'click',
 
function (e) {
    console
.log('click on #B in bubbling phase');
 
},
 
false,
);
document
.getElementById('C').addEventListener(
 
'click',
 
function (e) {
    console
.log('click on #C in bubbling phase');
 
},
 
false,
);

Konsol çıkışı, hangi öğeyi tıkladığınıza bağlıdır. DOM ağacındaki "en derin" öğeyi (#C öğesi) tıklarsanız bu olay işleyicilerin her birinin tetiklendiğini görürsünüz. Hangi öğenin hangi olduğunu daha net hale getirmek için biraz CSS stili uygulanmış konsol çıkışı #C öğesini (ekran görüntüsü de dahil) burada bulabilirsiniz:

"click on document in capturing phase"
"click on <html> in capturing phase"
"click on <body> in capturing phase"
"click on #A in capturing phase"
"click on #B in capturing phase"
"click on #C in capturing phase"
"click on #C in bubbling phase"
"click on #B in bubbling phase"
"click on #A in bubbling phase"
"click on <body> in bubbling phase"
"click on <html> in bubbling phase"
"click on document in bubbling phase"

Aşağıdaki canlı demoda bu özelliği etkileşimli olarak kullanabilirsiniz. #C öğesini tıklayın ve konsol çıkışını gözlemleyin.

event.stopPropagation()

Etkinliklerin nereden kaynaklandığını ve hem yakalama hem de taşma aşamalarında DOM'de nasıl ilerlediğini (yani yayıldığını) anladıktan sonra şimdi event.stopPropagation() konusuna geçebiliriz.

stopPropagation() yöntemi, yerel DOM etkinliklerinde (çoğu) çağrılabilir. "Çoğu" dememin nedeni, bu yöntemin çağrılmasının hiçbir şeye yaramayacağı birkaç durum olmasıdır (çünkü etkinlik baştan yayılmaz). focus, blur, load, scroll ve birkaç diğer etkinlik bu kategoriye girer. stopPropagation() çağrısı yapabilirsiniz ancak bu etkinlikler yayılmadığı için ilginç bir şey olmaz.

Peki stopPropagation ne işe yarar?

Adı üstünde, bu araç tam olarak bunu yapar. Çağırdığınızda, etkinlik o noktadan itibaren aksi takdirde gideceği tüm öğelere yayılmayı durdurur. Bu durum her iki yön için de (yakalama ve kabarcık oluşturma) geçerlidir. Bu nedenle, yakalama aşamasının herhangi bir yerinde stopPropagation() çağrısı yaparsanız etkinlik hiçbir zaman hedef aşamaya veya kabarcık aşamasına ulaşamaz. Bu işlevi kabarcıklanma aşamasında çağırırsanız yakalama aşamasını geçmiş olur ancak çağırdığınız noktadan itibaren "kabarcıklanma" işlemi durdurulur.

Aynı örnek işaretlememize dönecek olursak, #B öğesinde yakalama aşamasında stopPropagation() çağrılırsa ne olur?

Bu işlem aşağıdaki çıkışı verir:

"click on document in capturing phase"
"click on <html> in capturing phase"
"click on <body> in capturing phase"
"click on #A in capturing phase"
"click on #B in capturing phase"

Aşağıdaki canlı demoda bu özelliği etkileşimli olarak kullanabilirsiniz. Canlı demoda #C öğesini tıklayın ve konsol çıkışını gözlemleyin.

Kabarcıklanma aşamasında #A'te yayımı durdurmak ister misiniz? Bu durumda aşağıdaki çıktı elde edilir:

"click on document in capturing phase"
"click on <html> in capturing phase"
"click on <body> in capturing phase"
"click on #A in capturing phase"
"click on #B in capturing phase"
"click on #C in capturing phase"
"click on #C in bubbling phase"
"click on #B in bubbling phase"
"click on #A in bubbling phase"

Aşağıdaki canlı demoda bu özelliği etkileşimli olarak kullanabilirsiniz. Canlı demoda #C öğesini tıklayın ve konsol çıkışını gözlemleyin.

Eğlenmek için bir tane daha. #C için hedef aşamasında stopPropagation() çağrırsak ne olur? "Hedef aşaması"nın, etkinliğin hedefine ulaştığı döneme verilen ad olduğunu unutmayın. Bu işlem aşağıdaki çıkışı verir:

"click on document in capturing phase"
"click on <html> in capturing phase"
"click on <body> in capturing phase"
"click on #A in capturing phase"
"click on #B in capturing phase"
"click on #C in capturing phase"

"Kayıt aşamasında #C'yi tıklayın" ifadesini kaydettiğimiz #C etkinliği işleyicisinin yine çalıştığını ancak "Bulanıklaştırma aşamasında #C'yi tıklayın" ifadesini kaydettiğimiz işleyicinin çalışmadığını unutmayın. Bu durum gayet normaldir. stopPropagation()'ü öncekinden çağırdık. Bu nedenle, etkinliğin yayılması bu noktada sona erer.

Aşağıdaki canlı demoda bu özelliği etkileşimli olarak kullanabilirsiniz. Canlı demoda #C öğesini tıklayın ve konsol çıkışını gözlemleyin.

Bu canlı demolardan herhangi birinde denemeler yapmanızı öneririz. Yalnızca #A öğesini veya yalnızca body öğesini tıklamayı deneyin. Ne olacağını tahmin etmeye çalışın ve sonra doğru olup olmadığınızı gözlemleyin. Bu aşamada oldukça doğru tahminler yapabilirsiniz.

event.stopImmediatePropagation()

Bu garip ve sık kullanılmayan yöntem nedir? stopPropagation ile benzerdir ancak bir etkinliğin alt öğelere (yakalama) veya üst öğelere (yükseltme) gitmesini durdurmak yerine bu yöntem yalnızca tek bir öğeye birden fazla etkinlik işleyici bağlı olduğunda geçerlidir. addEventListener() çoklu yayın tarzında etkinlik işleyişini desteklediğinden, bir etkinlik işleyiciyi tek bir öğeye birden fazla kez bağlamak tamamen mümkündür. Bu durumda (çoğu tarayıcıda), etkinlik işleyicileri bağlandıkları sırayla yürütülür. stopImmediatePropagation() çağrısı, sonraki işleyicilerin tetiklenmesini engeller. Aşağıdaki örneği inceleyin:

<html>
 
<body>
   
<div id="A">I am the #A element</div>
 
</body>
</html>
document.getElementById('A').addEventListener(
 
'click',
 
function (e) {
    console
.log('When #A is clicked, I shall run first!');
 
},
 
false,
);

document
.getElementById('A').addEventListener(
 
'click',
 
function (e) {
    console
.log('When #A is clicked, I shall run second!');
    e
.stopImmediatePropagation();
 
},
 
false,
);

document
.getElementById('A').addEventListener(
 
'click',
 
function (e) {
    console
.log('When #A is clicked, I would have run third, if not for stopImmediatePropagation');
 
},
 
false,
);

Yukarıdaki örnek, aşağıdaki konsol çıkışıyla sonuçlanır:

"When #A is clicked, I shall run first!"
"When #A is clicked, I shall run second!"

İkinci etkinlik işleyicinin e.stopImmediatePropagation() işlevini çağırması nedeniyle üçüncü etkinlik işleyicinin hiçbir zaman çalışmadığını unutmayın. Bunun yerine e.stopPropagation() çağrılırsa üçüncü işleyici yine de çalışır.

event.preventDefault()

stopPropagation() bir etkinliğin "aşağıya" (yakalama) veya "yukarıya" (kabarcık oluşturma) doğru ilerlemesini engelliyorsa preventDefault() ne yapar? Benzer bir şey yapıyor gibi. Evet.

Pek sayılmaz. Bu iki kavram genellikle birbirine karıştırılır ancak aslında aralarında pek bir ilişki yoktur. preventDefault() simgesini gördüğünüzde kafanızda "aksiyon" kelimesini ekleyin. "Varsayılan işlemi engelleme"yi düşünün.

Varsayılan işlem olarak neyi sorabilirim? Maalesef bu sorunun cevabı, söz konusu öğe ve etkinlik kombinasyonuna büyük ölçüde bağlı olduğu için net değil. İşleri daha da karmaşık hale getirmek için bazen varsayılan işlem hiç yoktur.

Anlaşılması kolay olan çok basit bir örnekle başlayalım. Bir web sayfasındaki bağlantıyı tıkladığınızda ne olmasını beklersiniz? Elbette tarayıcının, bu bağlantıda belirtilen URL'ye gitmesini beklersiniz. Bu durumda öğe bir ana sayfa etiketi, etkinlik ise bir tıklama etkinliğidir. Bu kombinasyon (<a> + click), bağlantının href değerine gitmek için "varsayılan bir işleme" sahiptir. Tarayıcıda bu varsayılan işlemin yapılmasını engellemek isterseniz ne olur? Yani, <a> öğesinin href özelliği tarafından belirtilen URL'ye tarayıcının gitmesini engellemek istediğinizi varsayalım. preventDefault(), sizin için şu işlemleri yapar: Aşağıdaki örneğe bakın:

<a id="avett" href="https://www.theavettbrothers.com/welcome">The Avett Brothers</a>
document.getElementById('avett').addEventListener(
 
'click',
 
function (e) {
    e
.preventDefault();
    console
.log('Maybe we should just play some of their music right here instead?');
 
},
 
false,
);

Aşağıdaki canlı demoda bu özelliği etkileşimli olarak kullanabilirsiniz. The Avett Brothers bağlantısını tıklayın ve konsol çıktısını (ve Avett Brothers web sitesine yönlendirilmediğinizi) gözlemleyin.

Normalde The Avett Brothers etiketli bağlantıyı tıkladığınızda www.theavettbrothers.com sayfasına yönlendirilirsiniz. Ancak bu durumda, <a> öğesine bir tıklama etkinliği işleyici bağladık ve varsayılan işlemin engellenmesi gerektiğini belirttik. Bu nedenle, kullanıcı bu bağlantıyı tıkladığında herhangi bir yere yönlendirilmez. Bunun yerine konsolda "Belki de müziklerinin bir kısmını burada çalmamız daha iyi olur?" ifadesi kaydedilir.

Varsayılan işlemi önlemenize olanak tanıyan diğer öğe/etkinlik kombinasyonları nelerdir? Bunların hepsini listelemem mümkün değil. Bazen denemeniz gerekir. Bunlardan birkaçını kısaca aşağıda bulabilirsiniz:

  • <form> öğesi + "submit" etkinliği: Bu kombinasyon için preventDefault(), formun gönderilmesini engeller. Bu, doğrulama yapmak istiyorsanız kullanışlıdır. Bir şey başarısız olursa formun gönderilmesini durdurmak için koşullu olarak preventDefault'i çağırabilirsiniz.

  • <a> öğesi + "tıklama" etkinliği: Bu kombinasyon için preventDefault(), tarayıcının <a> öğesinin href özelliğinde belirtilen URL'ye gitmesini engeller.

  • document + "mousewheel" etkinliği: Bu kombinasyon için preventDefault(), fare tekerleği ile sayfanın kaydırılmasını engeller (klavyeyle kaydırma işlemi yine de çalışır).
    ↜ Bu işlem için { passive: false } ile addEventListener() çağrılması gerekir.

  • document + "keydown" etkinliği: Bu kombinasyon için preventDefault() ölümcüldür. Klavye kaydırma, sekme tuşu ve klavye vurgulama işlemlerini engelleyerek sayfayı büyük ölçüde işe yaramaz hale getirir.

  • document + "mousedown" etkinliği: Bu kombinasyon için preventDefault(), fareyle metnin vurgulanmasını ve fare aşağı basılıyken tetiklenen diğer "varsayılan" işlemleri engeller.

  • <input> öğesi + "keypress" etkinliği: Bu kombinasyon için preventDefault(), kullanıcı tarafından yazılan karakterlerin giriş öğesine ulaşmasını engeller (ancak bunu yapmayın; geçerli bir neden varsa bile bu durum nadiren görülür).

  • document + "contextmenu" etkinliği: Bu kombinasyon için preventDefault(), kullanıcı sağ tıkladığında veya uzun bastığında (veya içerik menüsünün görünebileceği başka bir şekilde) yerel tarayıcı içerik menüsünün görünmesini engeller.

Bu liste tam kapsamlı olmasa da preventDefault()'ün nasıl kullanılabileceğine dair iyi bir fikir verecektir.

Eğlenceli bir şaka mı?

Belgeden başlayarak yakalama aşamasında stopPropagation() ve preventDefault() yaparsanız ne olur? Bu sırada kahkaha dolu anlar yaşanır. Aşağıdaki kod snippet'i, web sayfalarını neredeyse tamamen kullanılamaz hale getirir:

function preventEverything(e) {
  e
.preventDefault();
  e
.stopPropagation();
  e
.stopImmediatePropagation();
}

document
.addEventListener('click', preventEverything, true);
document
.addEventListener('keydown', preventEverything, true);
document
.addEventListener('mousedown', preventEverything, true);
document
.addEventListener('contextmenu', preventEverything, true);
document
.addEventListener('mousewheel', preventEverything, { capture: true, passive: false });

Bunu neden yapmak istediğinizi bilmiyorum (birine şaka yapmak dışında). Ancak burada ne olduğunu ve neden böyle bir durumla karşı karşıya kaldığınızı düşünmek faydalı olacaktır.

Tüm etkinlikler window kaynağından geldiğinden bu snippet'te, click, keydown, mousedown, contextmenu ve mousewheel etkinliklerinin kendilerini dinleyen öğelere ulaşmasını tamamen engelliyoruz. Ayrıca, bu işlemden sonra dokümana bağlanan tüm işleyicilerin de engellenmesi için stopImmediatePropagation çağrılır.

Sayfanın stopPropagation() ve stopImmediatePropagation() nedeniyle (en azından çoğunlukla) kullanılamaz hale gelmediğini unutmayın. Bu filtreler, etkinliklerin normalde gideceği yere ulaşmasını engeller.

Ancak preventDefault() işlevini de çağırıyoruz. Bu işlevin, varsayılan işlemi engellediğini hatırlayacaksınız. Bu nedenle, varsayılan tüm işlemler (ör. fare tekerleğiyle kaydırma, klavyeyle kaydırma veya vurgulama ya da sekme tuşları, bağlantı tıklama, bağlam menüsü görüntüleme vb.) engellenir ve sayfa oldukça işe yaramaz bir durumda bırakılır.

Canlı demolar

Bu makaledeki tüm örnekleri tek bir yerde tekrar incelemek için aşağıdaki yerleşik demoya göz atın.

Teşekkür ederiz

Unsplash'taki Tom Wilson tarafından oluşturulan hero resim.