JavaScript Eventleriyle Çalışma

JavaScript Eventleriyle Çalışma, iletişim, etkileşim ve dinamik web sayfaları oluşturma konusunda en önemli yeteneklerden biridir Bu kapsamlı kılavuz, herhangi bir web geliştiriciyi kapsamlı JavaScript olayları hakkında bilgilendirecektir Eventlerle çalışarak, kodunuzu daha etkin hale getirebilir ve projelerinize dinamizm katabilirsiniz Bu rehberi kullanarak, web sitelerinizin kullanılabilirliğini artırabilir, ziyaretçilerinizin etkileşimini optimize edebilirsiniz

JavaScript web programlama dilinin en önemli özelliklerinden biri olan eventler, kullanıcının web sayfasındaki etkileşimlerini kontrol etmek ve yönlendirmek için kullanılır. JavaScript kodlarının tetiklenmesini sağlayan eventler, kullanıcının web sayfasındaki hareketlerini takip eder ve belirli fonksiyonları çalıştırarak kullanıcı deneyimini iyileştirir. Bu nedenle, eventleri etkili bir şekilde kullanma konusunda bilgi sahibi olmak, web sayfası geliştirme sürecinde önemli bir rol oynar.

JavaScript eventleri, HTML elementleriyle doğrudan ilişkilidir. Bir kullanıcı, bir HTML öğesi üzerinde bazı eylemler gerçekleştirdiğinde (tıklama, kaydırma, klavye tuşlarına basma vb.), belirtilen bir JavaScript kod bloğu otomatik olarak çalıştırılır. Bu JavaScript kodları, öğeleri değiştirmek, verileri göstermek, arka planda işlemler yapmak ve daha birçok işlevi yerine getirmek için kullanılabilir.

Eventler, JavaScript'in asenkron programlama modeline dayanır. Bir event tetiklendiğinde, JavaScript kodu o anda çalışır ve diğer kod bloklarının çalışmasını durdurmadan arka planda çalışır. Bu sayede, kullanıcıya hızlı ve akıcı bir deneyim sunulur. Eventlerin oluşturulması ve yönetimi için ise event handlerlar kullanılır. Event handlerlar, belirli bir eventin tetiklendiği durumlarda, belirtilen bir JavaScript kod bloğunun çalışmasını sağlar.

Özetle, JavaScript eventleri web sayfalarının etkileşimini kontrol etmek için kullanılır ve doğrudan HTML elementleriyle ilişkilidir.
JavaScript kodları, eventler tetiklendiğinde otomatik olarak çalışarak kullanıcı deneyimini iyileştirir ve arka planda işlemler yapar.
Eventlerin yönetimi için event handlerlar kullanılır.

Event Nedir?

JavaScript'teki eventler, sayfada gerçekleşen olası etkileşimlerin veya olayların birer temsilcisidir. Örneğin, bir kullanıcının bir butona tıklama ya da formu gönderme gibi bir işlem gerçekleştirmesi, bir event tetikleyebilir. Bu eventler, JavaScript kodu tarafından yakalanarak belirli bir işlemi gerçekleştirmek üzere kullanılabilir. JavaScript'teki eventler genellikle kullanıcının web sayfasındaki eylemleri veya tarayıcı olayları gibi sistem olaylarını ifade etmek için kullanılır.

Eventler, addEventListener() yöntemi kullanılarak tanımlanabilir. Event parameter’ını kullanan bu yöntem, olayın gerçekleşeceği elemana bağlı bir işlem yapar. Bu yöntem, HTML sayfalarına ve javascript dosyalarına da yazılabilir. Event listenerlar, kodun altında olayları açıklamak veya elemanların davranışlarını değiştirmek için kullanılabilir. Event nedir, belirli işlemleri takip etmek veya kullanıcı etkileşimlerini izlemek için önemlidir ve mümkün olan en iyi deneyimi sunmak için genellikle tüm web sayfalarında kullanılır.

Event Handlerlar

Event handlerlar, JavaScript'teki eventlerin çalışmasını kontrol etmek için kullanılan fonksiyonlardır. Bir event oluştuğunda, eventi dinleyen elementin belirli bir fonksiyonu tetikleyerek bir eylem gerçekleştirilmesini sağlarlar. Bu sayede, kullanıcı etkileşimleri ve diğer olaylar takip edilebilir ve önceden belirlenmiş bir davranış gerçekleştirilebilir.

Event handlerlar, HTML'deki elementlere veya JavaScript kodunda tanımlanabilen bir fonksiyona eklenerek kullanılabilir. Örneğin, bir elemente tıklama eventi eklendiğinde, o element tıklandığında belirli bir fonksiyonu tetikleyebilir. Bu şekilde, tıklama işlemi gerçekleştiğinde bir eylem gerçekleştirilebilir.

JavaScript'teki event handlerlar için en yaygın kullanılan yöntem, addEventListener() yöntemidir. Bu yöntem, event listenerların dinleyeceği event tipini ve tetiklenmesi gereken fonksiyonu parametre olarak alır.

Event handlerların temel amacı, elementleri düzenlemek, yanıt vermek ve etkileşimli davranışları kontrol etmektir. Bunun yanı sıra, event handlerlar ile bir elementin özellikleri değiştirilebilir veya belirli bir olay gerçekleştiğinde belirli bir kod yürütülebilir.

Bir event handler eklendiğinde, o event için belirli bir fonksiyon çalıştırılarak programın belirli bir davranışı gerçekleştirmesi sağlanır. Bu sayede, kullanıcı etkileşimi gibi olaylar takip edilerek programın daha dinamik, kullanıcı dostu ve hızlı bir yapısı elde edilebilir.

addEventListener()

JavaScript eventlerinin dinamikliği sayesinde bir element üzerinde birden fazla olay dinleyicisi eklemek için event listenerları kullanabiliriz. addEventListener() yöntemi sayesinde elemente yeni bir event dinleyicisi ekleyebilir veya varolan bir event dinleyicisini kaldırabiliriz.

Kullanımı oldukça basittir; ilk parametre olarak eklemek istediğimiz event adını, ikinci parametre olarak ise bir fonksiyon verilir. addEventListener() yöntemi ile eklenen eventler, removeEventListener() yöntemi kullanılarak kaldırılabilir.

Parametre	Açıklama
event	Eklenmek istenen event adı
listener	Bağlanacak olayın fonksiyon adı
useCapture	Olayın capturing bağlantı kurma modunu belirler (true veya false)

Kısacası, addEventListener() yöntemi sayesinde elemente bir event dinleyicisi ekleyerek, o event gerçekleştiğinde tetiklenecek fonksiyonu belirleyebiliriz. Bu sayede elementin etkileşimleri ile ilgili işlemler yapabilir ve kullanıcılara daha iyi bir deneyim sunabiliriz.

event.preventDefault()

JavaScript'te bazı eventlerin varsayılan işlevleri vardır. Örneğin, click eventi bir bağlantıya tıklandığında, o bağlantının nereye gitmesi gerektiğini belirleyen varsayılan bir işleve sahiptir. Ancak bazen, varsayılan işlevi devre dışı bırakmak veya değiştirmek isteyebiliriz. İşte bu durumda, event.preventDefault() kullanılır.

event.preventDefault() yöntemi varsayılan event'i iptal eder. Örneğin, bir form gönderildiğinde sayfanın yenilenmesi gerektiğini düşünelim. Ancak biz formun sayfayı yenilemeden gönderilmesini istiyoruz. Bu durumda, formun submit eventine bir event listener ekleyip, event.preventDefault() yöntemini kullanarak sayfayı yenilemeye karşı koruyabiliriz.

Bir başka örnek olarak, bir bağlantıya tıklandığında sayfayı yenilemek yerine, bağlantının başka bir sayfaya gitmesini istediğimizi düşünelim. Bu durumda, bağlantının click eventine bir event listener ekleyip, event.preventDefault() yöntemini kullanarak sayfanın yenilenmesini engelleyebiliriz.

Event handlerlara event.preventDefault() eklemek, sayfanın yanlışlıkla yenilenmesini önlemek veya gereksiz sayfa yenilemelerini engellemek için çok yararlıdır. Ancak, tüm eventlerde kullanmak mantıklı değildir. Bu yöntemi kullanmadan önce, o event için neden kullanmak istediğimize iyi bir şekilde düşünmeliyiz.

event.stopPropagation()

Event.stopPropagation() yöntemi, bir event'in daha yukarıdaki bir elemente ulaşmadan önce durdurulmasını sağlar. Bu yöntem, event'lerin bubbling veya capturing şeklinde nasıl davrandığını özetler.

Bir event oluştuğunda, bu event genellikle en içteki elementten başlar ve dışa doğru yayılır. Bu olaya bubbling denir. Event.stopPropagation() yöntemi, bir event'in daha yukarıdaki bir elemente ulaşmasını önler ve event'in sadece hedef elementte durmasını sağlar.

Örneğin, bir butona tıklama eventi eklediğinizde, bu event diğer elementlere ulaşmadan önce butonun parent elementinden başlayarak tüm yol boyunca yukarı doğru yayar. Ancak, event.stopPropagation() yöntemini kullanarak, event'in yukarı doğru yayılmasını önleyebilir ve sadece belirli bir elementte kalmasını sağlayabilirsiniz.

Bir event'in ne zaman durdurulacağına veya yukarı doğru yayılmasına izin verileceğine karar vermek için capturing ve bubbling konusunu anlamak önemlidir. Capturing, içteki elementten dışa doğru yayar ve daha sonra hedef elemente ulaşırken bubbling, hedef elementten dışa doğru yayılır.

Event.stopPropagation() yöntemi, interactive elementler (yani, butonlar, input alanları vb.) dışındaki tüm elementlerde kullanılabilir. Ancak, bu yöntemi gereksiz yere kullanmak, event'lerin beklenmeyen bir şekilde işlenmesine ve performans sorunlarına neden olabilir.

Sonuç olarak, event.stopPropagation() yöntemi, belirli bir elementte durması gereken event'leri kontrol etmek için kullanışlı bir yöntemdir. Ancak, capturing ve bubbling davranışını anlamak, hangi event'lerin durdurulması gerektiğine karar vermede önemlidir.

inline event handlers

HTML elementlerine inline event handlerları eklemek oldukça basittir. Bir elemente event handler eklemenin en yaygın yolu, elementin ilgili özelliği içinde bir JavaScript kodu yazmaktır. Örneğin, bir butona tıklanıldığında bir mesaj göstermek istiyoruz diyelim. Bunun için ```

Bu kod, `Tıkla` yazılı bir butonu içeren bir elementi oluşturur ve tıklanıldığında `Merhaba Dünya` mesajını gösterir.

Bunun yanı sıra, bir çok elementin farklı eventlerine de inline event handlerlar ekleyebilirsiniz. Örneğin, bir input alanına bir metin girildiğinde bir fonksiyonu tetikleyebiliriz.

```html```

Ayrıca, bir elementin birden fazla eventine birden fazla inline event handler da ekleyebilirsiniz.

```html```

Burada, butona tıklandığında alert mesajı verileceği ve mouse'un üstünde durulduğu zaman renginin değiştirileceği iki farklı event handler tanımladık.

Bir elemente eklenen inline event handlerlar, öncelikle bir JavaScript kodu olduğu için, kodun okunaklılığını azaltabilir ve HTML dosyasını karmaşık hale getirebilir. Bu nedenle, daha büyük ölçekli projelerde, event listenerlar ve event handlerlar JavaScript dosyalarında tanımlanabilir veya özel bir JavaScript dosyasında ayrılmış olarak tutulabilir.

Bazı Eventler

JavaScript'te kullanılan birçok event vardır. Bu eventlerden bazıları şunlardır:

Bu event, bir HTML elementine tıklandığında tetiklenir. Örneğin, bir butona tıklandığında veya bir resme tıklandığında kullanılabilir. click eventini kullanarak, kullanıcının tıklamasıyla sayfada belirli işlevler gerçekleştirebilirsiniz.

scroll eventi, kullanıcı bir sayfada aşağı veya yukarı kaydırdığında tetiklenir. Bu özellikle tek sayfalı web sitelerinde çok önemlidir. scroll eventini kullanarak, sayfanın belirli bölümlerinde hareketli efektler oluşturabilir veya belirli bir bölüme otomatik olarak kaydırabilirsiniz.

keydown eventi, bir tuşa basıldığında tetiklenir. Özellikle form alanları veya oyunlar gibi klavye kullanımının sık olduğu alanlarda kullanılabilir. Bu eventle, kullanıcının hangi tuşa bastığını kontrol edebilir ve buna göre belirli işlemler gerçekleştirebilirsiniz.

Bu eventlerin yanı sıra JavaScript'te birçok başka event vardır. Bu eventleri kullanarak web sitenizde kullanıcı deneyimini geliştirebilirsiniz. Ancak eventleri doğru bir şekilde kullanmak ve gereksiz kullanımdan kaçınmak önemlidir.

click

Click eventi, kullanıcının bir HTML elementine tıklaması durumunda tetiklenir. JavaScript ile click eventinin kullanımı oldukça basittir. Öncelikle, eventin hangi elementte tetikleneceği belirtilmelidir.

Bunun için, HTML kodunda onclick özelliği kullanılır. Örneğin:

HTML Kodu	JavaScript Kodu
<button onclick="myFunction()">Click Me!</button>	function myFunction() { alert("Hello World!"); }

Yukarıdaki örnekte, kullanıcı "Click Me!" butonuna tıkladığında, myFunction() fonksiyonu tetiklenecektir ve ekranda "Hello World!" yazısı görüntülenecektir

Bunun yanı sıra, JavaScript'te event listenerlar da kullanılabilir. Özellikle, bir elementin üzerine tıklama sayısını saymak istediğinizde pratik bir çözümdür. Bunun için, addEventListener() yöntemi kullanılır. Örneğin:

HTML Kodu	JavaScript Kodu
<button id="myButton">Click Me!</button>	let myButton = document.getElementById("myButton"); let count = 0; myButton.addEventListener("click", function() { count++; console.log("Clicks: " + count); });

Bu örnekte, kullanıcı "Click Me!" butonuna her tıkladığında, count değişkeni bir artacak ve tarayıcının console bölümünde "Clicks: x" şeklinde sonuç yazısı görüntülenecektir.

Click eventinin diğer özellikleri ise, eventin hangi butona tıklandığını ya da tıklamanın neden gerçekleştiğini belirleyebilirsiniz. Bunun için, event objesi kullanılır. Örneğin:

JavaScript Kodu
let myButton = document.getElementById("myButton"); myButton.addEventListener("click", function(event) { console.log("Clicked button id: " + event.target.id); console.log("Click type: " + event.type); });

Bu örnekte, event objesi kullanarak, tıklama eventinin hangi butona tıklandığını ve türünü belirleyebiliriz.

Click eventinin kullanımı oldukça basit olmasına rağmen, kullanımı oldukça yaygındır ve birçok projede kullanılır.

scroll

Scroll eventi, web sayfanın vertical scrollbar'ı üzerinde kaydırıldığında tetiklenir. Bu olay, kullanıcının sayfayı bir yere ilerletip ilerlemediğini kontrol etmek için sıklıkla kullanılır.

Birçok web sayfası, scroll etkileşimleriyle sayfanın kullanımını daha zengin hale getirir. Örneğin, bir görsel galeri sayfası kullanıcılardan herhangi bir görseli seçmelerini isteyebilir. Scroll etkileşimi kullanılarak sayfanın altına kaydırıldığında bu galerideki yeni görseller otomatik olarak yüklenir. Böylece kullanıcılar tüm görsellere erişebilirler.

Aşağıdaki örnek, bir scroll etkinliğini nasıl kullanabileceğinizi gösterir:

Özellik	Açıklama
event.type	Olayın türü, burada "scroll"
window.scrollY	Sayfanın vertical scrollbar'ının mevcut konumu

window.addEventListener('scroll', function(event) {  console.log('Scroll eventi:', event.type);  console.log('Sayfa scroll konumu:', window.scrollY);});

Bu kod, scroll olayını dinler ve her scroll etkinliğiyle birlikte sayfanın mevcut grid konumunu konsola yazdırır.

keydown

Javascript, web sitelerinde ve uygulamalarda dinamik ve etkileşimli öğelerin oluşturulmasını sağlar. Bu öğelerin bazıları klavye olayları ile kullanıcılar tarafından tetiklenebilir. keydown eventi, klavyede herhangi bir tuşa basıldığında tetiklenen bir olaydır.

Document nesnesine bir event listener ekleyerek keydown eventini dinleyebilir ve kullanıcıların hangi tuşlara bastığını öğrenebilirsiniz. Bu bilgiler daha sonra kullanıcının yapmaya çalıştığı işlemi belirlemek için kullanılabilir. Örneğin, kullanıcının belirli bir tuşa basması durumunda belirli bir öğeyi hareket ettirebilir ya da bir işlem başlatabilirsiniz.

Bu event ile ilgili bazı özellikler aşağıdaki tabloda özetlenmiştir:

Özellik	Açıklama
event.keyCode	Klavyeden basılan tuşun keyCode değerini döndürür.
event.key	Klavyeden basılan tuşun karakterini döndürür.
event.shiftKey	Shift tuşunun basılıp basılmadığını belirler.
event.ctrlKey	Ctrl tuşunun basılıp basılmadığını belirler.
event.altKey	Alt tuşunun basılıp basılmadığını belirler.

Özellikle shift, ctrl ve alt tuşlarının basılıp basılmadığını kontrol etmek, klavye kısayolları oluşturmak için oldukça önemlidir. Bu özellikleri kullanarak, kullanıcının klavyede kombinasyonlar oluşturarak belirli bir işlemi gerçekleştirmesini sağlayabilirsiniz.

Bir örnek olarak, kullanıcının "ctrl + s" tuşlarına basarak bir belgeyi kaydetmesini sağlayabilirsiniz. Bu örnekte, keydown eventini dinleyerek kullanıcının "ctrl" ve "s" tuşlarına basıp basmadığını kontrol edebilir ve belgeyi kaydetmek için gerekli işlemleri gerçekleştirebilirsiniz.