javaScript VARSAYILAN TARAYACI EYLEMLERİ

Birçok events(olay) otomatik olarak tarayıcı işlemlerine neden olur. örneğin : 

• Bir bağlantıya yapılan bir tıklama, Verilen URL'ye yönlendirmeyi başlatır.
• Bir form içinde Gönder düğmesine bir tıklama - sunucuya verilerin gönderilmesini başlatır.
• Bir metnin üzerine mouse düğmesine basıp , ilerleyerek metni seçin.

Tarayıcı eylemlerini önleme

Tarayıcıya, işlem yapmasını istemediğimizi söylemenin iki yolu vardır:

• Tarayıcı işlemini iptal etmek için, event.preventDefault () adlı standart bir method bulunur.
• İşleyici bir olayı, inline elemente atanırsa (addEventListener kullanarak değil), işleyiciden false değerini döndürebilirsiniz.

Aşağıdaki örneklerde, bir bağlantıyı tıklattığınızda geçiş gerçekleşmez.

 <a href="https://www.google.com.tr/" onclick="return

 false">Burayı Tıkla</a>
 
veya

<a href="https://www.google.com.tr/"

 onclick="event.preventDefault()">Tıkla</a>

ÇIKTI :

NOT : Bir olay işleyicisi tarafından döndürülen değer genellikle dikkate alınmaz. Tek istisna, olay yoluyla atanan işleyiciden false döndürmesidir. Diğer tüm durumlarda, geri dönüş gerekmez ve herhangi bir şekilde işlenmez.

ÖRNEK : Menü

<ul id="test">

  <li><a href="https://www.google.com.tr/">1-google</a></li>
  
  <li><a href="https://www.google.com.tr/">2-google</a></li>
  
  <li><a href="https://www.google.com.tr/">3-google</a></li>
  
</ul>

ÇIKTI :

Yukarida ki tüm menü öğeleri düğmeler ve bağlantıların URL'si çalışmayacak şekilde HTML işaretleme yapılabilir.

• Yukarıda ki baglantılara "sağ" mouse tuşuna basarak yeni bir pencerede açıp kullanmak istersek URL'miz çalışacaktır.
• Arama motorları Dizin oluştururken bir <a href="..."> bağlantısını izler.

Bu nedenle, işaretlemede <a> etiketi kullanıyoruz. Ancak genellikle tıklama tamamen JavaScript ile işlenecek. Dolayısıyla, varsayılan tarayıcı işlemini iptal etmeliyiz.

test.onclick = function(event) {

  if (event.target.nodeName != 'A') return;

  var href = event.target.getAttribute('href');
  
  alert( href ); // href içeriğini gösterir.

  return false; // URL işlemini iptal eder
  
};

Return false değerini atlarsak, kodumuz çalıştırıldıktan sonra tarayıcı, "varsayılan eylemi" gerçekleştirir - href'teki URL'yi takip eder.

Bu arada, etkinlik delegasyonu kullanmak, menümüzü esnek hale getirir. İç içe geçmiş listeler ekleyebilir ve CSS kullanarak "kayabilir" stil oluşturabiliriz.

Diğer tarayıcı işlemleri

Birçok varsayılan tarayıcı eylemi vardır:

Bir tarayıcı işlemini tetikleyen bazı olay örnekleri şunlardır:

• mousedown İmleç metin üzerindeyken mouse tıklattığında seçimi başlatır.
• click : <input type = "checkbox"> üzerine tıklayın - bir işaret koyar veya kaldırır.
• submit :Formdaki <input type = submit> 'a tıkladığınızda, yani gönder tuşuna bastığınızda veriler sunucuya gönderilir.
• wheel : Mause tekerleğinin hareketi kaydırmayı başlatır.
• KeyDown :Tuşuna basarak bir alana veya diğer eylemlere bir karakter eklemeye neden olabilir.
• ContextMenu : Olay sağ tıklatma gerçekleşir, eylem tarayıcı bağlam menüsünü göstermektir.

Olayları yalnızca JavaScript ile ele almak istersek tüm varsayılan eylemler engellenebilir.

Diğer olayları önleme

Olayların bazısı birbirlerine akış olur. İlk olayı önlersek, ikinci bir olay olmayacaktır.

Örneğin, <input> giriş alanında MouseDown tıklatıldığında odaklanma içinde olmasına neden olur.

Aşağıdaki ilk <input> 'a tıklamayı deneyin - odaklanma olayı olur. Bu normal. Ancak, ikinciyi tıklarsanız odaklama yoktur.

<input value="Focus works" onfocus="this.value=''">

<input onmousedown="return false" onfocus="this.value=''" value="Click me">

ÇIKTI:

Bunun nedeni, standart eylem için OnMouseDown iptal edilir. İkinci input'a giriş için başka bir yol kullanırsak odaklanma hala mümkündür. Öte yandan, ikinci <input>' a Artık mouse tıklamasıyla değil. Tab tuşuna basarak gidebilirsiniz ve odaklanma çalışacaktır.

Tarayacı işlemini iptal etmek kabarcıklanma (bubbling) iptal etmez

İkisini de iptal etmek istiyorsanız:

function stop(e) {

  if (e.preventDefault) { // standart
  
    e.preventDefault();
  
    e.stopPropagation();
  
  } else {    // IE8
  
    e.returnValue = false;
  
    e.cancelBubble = true;
  }
}

ÖZET :

• Tarayıcıda, linklerde gezinme, form gönderme gibi bir dizi olay için yerleşik eylemleri vardır. Genellikle, bunları iptal edebilirsiniz.
• Varsayılan eylemi iptal etmek için iki yol vardır. İlki event.preventDefault() (IE <9 event.returnValue=false) ikincisi return false kullanmaktır.
• Varsayılı tarayıcı eylemlerini iptal etmek kabarcıklamayı (bubbling) iptal etmez ayrı bağımsız çalışırlar.