JavaScript Dilinde JS Events Kullanımı

JavaScript, web sayfalarını etkileşimli hale getirmek için kullanıcı eylemlerine veya tarayıcı olaylarına tepki verme yeteneği sağlar. Bu tepkiler, 'olaylar' (events) aracılığıyla yönetilir. Bir kullanıcı bir düğmeye tıkladığında, bir form gönderdiğinde veya fare imlecini bir öğenin üzerine getirdiğinde, JavaScript bu olayları dinleyebilir ve tanımlanan işlevleri çalıştırabilir. Bu makale, JavaScript olaylarının temel kullanımını, sözdizimini ve pratik uygulamalarını detaylandıracaktır.

Sözdizimi

JavaScript'te bir DOM öğesine olay dinleyicisi eklemenin en yaygın ve önerilen yolu EventTarget.addEventListener() metodunu kullanmaktır. Bu metod, belirli bir olay türü gerçekleştiğinde çalıştırılacak bir işlevi (handler) kaydeder.

target.addEventListener(event, listener, [options]);

Detaylı Açıklama

EventTarget.addEventListener() metodu üç ana argüman alır:

• target: Olay dinleyicisinin ekleneceği DOM öğesidir. Örneğin, bir düğme, bir metin alanı veya belge kendisi olabilir.

• event: Dinlenecek olayın adını belirten bir stringdir. Örnekler arasında 'click', 'mouseover', 'keydown', 'submit' bulunur. Olay adları büyük/küçük harfe duyarlıdır ve genellikle küçük harfle yazılır.

• listener: Belirtilen olay gerçekleştiğinde çağrılacak olan işlevdir (callback fonksiyonu). Bu işlev, olayın kendisi hakkında bilgi içeren bir Event nesnesini argüman olarak alabilir.

• options (isteğe bağlı): Olay dinleyicisinin davranışını yapılandıran bir nesnedir. En yaygın seçenekler şunlardır:

  
  

  • capture: Bir boolean değeridir. true ise, olay yakalama (capturing) aşamasında, false ise olay kabarcıklanma (bubbling) aşamasında tetiklenir. Varsayılan değer false'tur.

  • once: Bir boolean değeridir. true ise, olay dinleyicisi olay bir kez tetiklendikten sonra otomatik olarak kaldırılır. Varsayılan değer false'tur.

  • passive: Bir boolean değeridir. true ise, dinleyicinin event.preventDefault() çağrısı yapmayacağını belirtir. Bu, özellikle kaydırma (scrolling) olaylarında performansı artırabilir. Varsayılan değer false'tur.

  
  

Pratik Kullanım Örnekleri

Aşağıdaki örnekler, JavaScript olaylarının çeşitli kullanım senaryolarını göstermektedir.

Örnek 1: Düğme Tıklama Olayı

Bir HTML düğmesine tıklandığında konsola bir mesaj yazdıran basit bir örnek.

Bana Tıkla

Örnek 2: Giriş Alanı Değişikliği

Bir metin giriş alanındaki değer her değiştiğinde bu değişikliği yakalayan bir örnek.

Girilen Değer: 

Örnek 3: Fare Üzerine Gelme ve Ayrılma

Bir öğenin üzerine fare imleci geldiğinde ve ayrıldığında farklı işlevleri çalıştıran bir örnek.

    Fareyi Üzerime Getir

Önemli Notlar

• Dinleyiciyi Kaldırma: Performans ve bellek sızıntılarını önlemek için, özellikle tek seferlik olaylarda veya bileşenler kaldırıldığında EventTarget.removeEventListener() metodunu kullanarak olay dinleyicilerini kaldırmak önemlidir. addEventListener ile aynı argümanlar kullanılmalıdır (aynı fonksiyon referansı dahil).

• Olay Nesnesi: Olay dinleyici fonksiyonuna otomatik olarak geçirilen Event nesnesi, olayın türü (event.type), hedefi (event.target), tuş bilgisi (event.key, event.keyCode) gibi değerli bilgiler içerir.

• event.preventDefault(): Bazı olayların varsayılan tarayıcı davranışları vardır (örneğin, bir bağlantıya tıklamak sizi başka bir sayfaya götürür veya bir form göndermek sayfayı yeniler). Bu varsayılan davranışları durdurmak için olay nesnesi üzerindeki event.preventDefault() metodunu kullanabilirsiniz.

• Olay Kabarcıklanması ve Yakalama: Olaylar, DOM ağacında yukarı (kabarcıklanma) veya aşağı (yakalama) doğru yayılır. addEventListener metodunun üçüncü argümanı (veya options nesnesindeki capture özelliği) bu davranışı kontrol etmenizi sağlar. Çoğu durumda, varsayılan kabarcıklanma davranışı yeterlidir.

• this Anahtar Kelimesi: Bir olay dinleyicisi içinde this anahtar kelimesi, olayın gerçekleştiği DOM öğesini (event.currentTarget) ifade eder. Ancak, arrow fonksiyonlar kullanıldığında this, tanımlandığı kapsayıcı kapsamı korur.