Event Listener Nedir? Adından da anlaşılacağı gibi, olay dinleyicisi anlamına gelir JavaScript'te bir olay meydana geldiğinde, kodunuzun bu olayı yakalamasına ve belirli bir işlem yapmasına olanak tanır Daha fazla öğrenmek için okumaya devam edin!

JavaScript'te Event Listener, belirli bir olay gerçekleştiğinde çalıştırılacak kodlar tanımlayan bir fonksiyondur. Bu kodlar, örneğin bir butona tıklandığında, kullanıcı bir tuşa bastığında veya bir form doldurulduğunda tetiklenebilir. Event Listener, bir HTML elementine eklenir ve bu elementin bir olaya tepki vermesi beklenir.

Event Listener'ın en önemli özelliği, bir olayın gerçekleştiği anda kodları çalıştırmasıdır. Bu durum, sayfa yenilenmediği veya kullanıcının ekranını değiştirmediği anlamına gelir. Bu nedenle, Event Listener'lar sayfa yüklemesi hızını artırır ve interaktif deneyimi iyileştirir. Ayrıca, birden fazla Event Listener bir elemente eklenerek, farklı olaylardan etkileşimler oluşturulabilir.

Click Event'i ile DOM Manipülasyonu

Event Listener, Javascript'in en önemli özelliklerinden biri olan etkinlik dinleyicisidir. Bir web sayfasında, belirli bir etkinliğin gerçekleşmesiyle tetiklenerek, fonksiyonların çalışmasını sağlayan bu özellik, kullanıcılara web sayfalarında dinamik içerikler oluşturma imkanı sağlar.

Click Event'i, kullanıcının bir butona tıklamasıyla tetiklenerek, belirlenen işlemin gerçekleştirilmesini sağlar. Örneğin, bir buton oluşturup, üzerine bir click event listener ekleyerek, butona tıklandığında belirleyeceğimiz özellikleri gerçekleştirip, HTML elementlerini değiştirebiliriz. Bu şekilde web sayfasında, kullanıcının butona tıklamasıyla belirleyeceğimiz işlemlerin gerçekleştirilmesini sağlayarak, daha interaktif bir web sayfası oluşturabiliriz.

Aşağıdaki örnekte, button elementi oluşturup, üzerine click event listener ekleyerek, butona tıklandığında background rengini değiştireceğiz. Örneği bir HTML dosyasına ekleyerek, butona tıklandığında arka plan renginin değiştiğini görebilirsiniz.

        <button id="btn">Click Me</button>      

        const button = document.getElementById('btn')button.addEventListener('click', function() {  document.body.style.backgroundColor = 'purple';});      

Bu örnek sayesinde, bir butona tıklandığında, web sayfasının arka plan renginin purple olarak değiştirildiğini görebilirsiniz. Bu örnek sayesinde Click Event kullanarak, kullanıcının bir butona tıklaması sonucu belirlediğimiz işlemin gerçekleştirilmesini sağlayarak, DOM manipülasyonu yapmış olduk.

Input Event'i ile DOM Manipülasyonu

Event Listener'lar JavaScript kodları içerisinde kullanılır ve belirli bir HTML elementinde meydana gelen herhangi bir olayın yakalanmasını sağlar. Input Event'i de bu olaylardan biridir ve kullanıcının input alanına girdiği değeri yakalayarak başka bir elementte gösterir.

Örneğin, bir kullanıcı bir formda bir metin alanına girdiği bir metni, bu metni bir sonraki elementte görmek isteyebilir. Input Event listener'ını kullanarak, kullanıcının girdiği metni yakalayabiliriz.

const input = document.querySelector('input');const output = document.querySelector('.output');input.addEventListener('input', () => {  output.textContent = input.value;});

Bu örnekte, input elementinde meydana gelen herhangi bir değişikliği takip ediyoruz. Değişiklik yapıldığında, yani kullanıcı değer herhangi bir harf veya rakam yazdığında, Input Event listener tetiklenir ve kullanıcının girdiği değeri yakalar. Ardından, bu değer bir sonraki elementte (output) gösterilir.

Bu örnek, Input Event listener'ının ne kadar güçlü olduğunu gösterir. Kullanıcılar için daha iyi bir deneyim sağlayarak, web siteleri ve uygulamalar için harika bir araçtır.

Keyup Event'i ile DOM Manipülasyonu

JavaScript'te kullanılan Event Listener, kullanıcının yapmış olduğu işlemleri algılayarak, belirlenen elementleri manipüle etmeye yarayan bir fonksiyondur. Bu fonksiyonları kullanarak web sayfalarına dinamik ve etkileşimli özellikler ekleyebilirsiniz. Bu özellikler arasında klavyeden tuşa basılması, butona tıklama, fare hareketleri gibi birçok olay yer alır.

Keyup Event'i ise kullanıcının klavyeden harf girildikçe, bir diğer elementte girilen değeri anlık olarak göstermek için kullanılabilir. Örneğin, bir input alanına harf girişi yapıldığında, bunun sonucunda farklı bir elementte bu harf gösterilebilir. Bu şekilde kullanıcıya, yazdığı harfleri anlık olarak göstererek işlemlerini daha verimli hale getirebilirsiniz.

Bu özellik kullanılarak, klavyeden harf girişi yapıldıkça anlık olarak başka bir elementte girilen değer gösterebilirsiniz. Böylece kullanıcının yazdığı verileri kontrol etmesi kolaylaşır ve işlemler hızlandırılır. Örneğin, bir login sayfasında, kullanıcının girdiği şifreyi anlık olarak göstermek isteyebilirsiniz. Bunun için Keyup Event'i kullanarak, şifreyi girilen kutucuğun yanında anlık olarak gösterebilirsiniz.

keydown Event'i ile DOM Manipülasyonu

Klavyeden herhangi bir tuşa basılması durumunda, DOM manipülasyonunu gerçekleştirerek farklı bir elementte yeni bir değer göstermek mümkündür. Bu işlem için kullanılan event listener, keydown event’idir. Bu event handler, klavyeden herhangi bir tuşa basıldığında tetiklenir ve belirlenen işlemlerin gerçekleştirilmesine olanak sağlar.

Örneğin, kullanıcı bir input alanına klavyesinden bir harf girerse, bu harf bir diğer elementte gösterilebilir. Bunun için keydown event’i kullanılır ve her harf girildiğinde, DOM manipülasyonu yoluyla belirtilen elementte girilen harf gösterilir. Bu sayede kullanıcının girdiği verileri anında takip etmek, daha hızlı bir feedback sağlamak mümkündür.

Ayrıca, bu event handler kullanılarak farklı elementlerde farklı işlemler gerçekleştirilebilir. Örneğin, kullanıcının klavyeden bir tuşa basması durumunda, farklı bir elementte girilen değerin karakter uzunluğu gösterilebilir ya da belirli bir şarta bağlı olarak farklı işlemler gerçekleştirilebilir.

Bu nedenle, keydown event handler'ı, interaktif uygulamalar için oldukça önemlidir ve etkili bir şekilde kullanılması gerekmektedir. Bu sayede, kullanıcılara daha iyi bir deneyim sunulabilir ve uygulamalar daha işlevsel hale getirilebilir.

keyup Event'i ile DOM Manipülasyonu

klavyeden bir tuşa basıldığı ve ardından tuşun bırakıldığı zaman kullanılan bir event tipidir. Bu event tipi aracılığıyla, kullanıcının girdiği değerlerin yanı sıra diğer elementlerdeki değişiklikler de izlenebilir.

Örneğin, bir input alanına yazı yazıldığında, keyup event'i tetiklenir ve yeni değer bir diğer elementte gösterilebilir. Bu sayede, kullanıcının yazdığı değerin doğruluğu ve tutarlılığı kontrol edilebilir.

Bir diğer kullanım örneği ise, klavyede bir tuşa basıldığında, farklı bir elementte yeni bir değer göstermek olabilir. Bu örnekte, kullanıcının basılan tuşa göre farklı bir işlem gerçekleştirilebilir. Örneğin, kullanıcı ENTER tuşuna bastığında formu göndermek gibi.

keyup event'i, diğer event tipleri gibi oldukça kullanışlıdır ve DOM manipülasyonları için önemlidir. Özellikle kullanıcının girdiği değerlerin doğruluğunu kontrol eden uygulamalarda sıklıkla kullanılmaktadır.

Input Event'i ile Element Renklendirme Örneği

Event Listener özelliği kullanılarak sayfada bulunan bir elementin, kullanıcının girdiği değere göre rengini değiştirme işlemini gerçekleştirmek mümkündür. Örneğin; bir input alanına girilen değere göre, sayfada bulunan bir div elementinin rengini değiştirebilirsiniz.

Bunun için öncelikle, HTML sayfasında gerekli elementlerin tanımlamalarını yapmanız gerekmektedir. Örneğin; bir input alanı ve bir div elementi tanımlayabilirsiniz. Daha sonra, JavaScript kodları ile bu elementlerin Event Listener'ları oluşturulabilir.

Girilen değerin kontrolü için, Input Event'i kullanılabilir. Bu sayede, kullanıcının girdiği her karakter için, girilen değer kontrol edilir ve elementin rengi değiştirilir. Örneğin; girilen değer, belirli bir sayıda karakterden fazla ise elementin rengi yeşil olabilir veya girilen değer, belirli bir formata uygunsa elementin rengi mavi olabilir.

Bunun için, öncelikle HTML sayfasında input alanı ve div elementi tanımlanabilir. Daha sonra, JavaScript kodları ile bu elementlerin Event Listener'ları oluşturulabilir ve girilen değer kontrol edilebilir. Kontrol sonucuna göre, elementin rengi değiştirilerek kullanıcıya görsel bir geri bildirim sağlanabilir.

Bu özellik, çeşitli web uygulamaları için oldukça önemlidir. Özellikle, kullanıcı tarafından girilen verilerin doğruluğunun kontrol edilmesi gereken durumlarda, Input Event'i ile elementlerin renginin değişmesi sayesinde kullanıcılara hatalarını göstermek ve doğru bir giriş yapmalarını sağlamak mümkündür.

Event Listener ile Form Validasyonu Uygulaması

Event Listener, web sayfalarındaki formların güvenliği ve doğruluk kontrolü için önemli bir araçtır. Bu örnekte, kullanıcının girdiği verilerin doğruluğunu kontrol eden bir Form Validasyonu Uygulaması oluşturacağız.

İlk olarak, HTML sayfamıza bir form ekleyelim:

Formdaki her input alanı 'required' özelliği ile zorunlu hale getirildi, 'email' türünde olan email alanı için doğru formatın kontrolünü sağladık ve 'password' türünde olan şifre alanına da uzunluğu kontrol eden bir 'minlength' özelliği ekledik.

Şimdi, JavaScript dosyamızda Event Listener kullanarak formu kontrol edelim:

document.getElementById("kaydet").addEventListener("click", function(event) {  var ad = document.getElementById("ad").value;  var soyad = document.getElementById("soyad").value;  var email = document.getElementById("email").value;  var sifre = document.getElementById("sifre").value;    var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;  var sifreRegex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[0-9a-zA-Z]{8,}$/;    if (!emailRegex.test(email)) {    event.preventDefault();    alert("Lütfen geçerli bir email giriniz.");  }    if (!sifreRegex.test(sifre)) {    event.preventDefault();    alert("Şifreniz en az 8 karakter uzunluğunda olmalı ve en az bir rakam, bir küçük harf ve bir büyük harf içermelidir.");  }    var sonuc = "Ad: " + ad + "
Soyad: " + soyad + "
Email: " + email + "
Şifre: " + sifre;  document.getElementById("sonuc").innerHTML = sonuc;});

Bu kodda, 'kaydet' butonuna tıklanıldığında çalışacak bir Event Listener tanımladık. Kullanıcının girdiği ad, soyad, email ve şifre bilgilerini alıp, doğru formatta girilip girilmediğini kontrol ediyoruz. Eğer herhangi bir alanda hata varsa, preventDefault() metodu ile formun gönderilmesini engelliyoruz ve hata mesajları veriyoruz.

Eğer form doğru girilmişse, sonuçları farklı bir elementte gösteriyoruz:

Sonuç:

Bu kodda, sonucu göstermek için bir 'p' elementi oluşturduk. 'innerHTML' özelliği ile sonucu bu elementin içinde gösteriyoruz.

Form Validasyonu uygulamamızı başarıyla tamamladık. Artık kullanıcının girdiği verilerin doğruluğunu kontrol edebilir ve formun güvenliğini sağlayabiliriz.

Email Formatı Kontrolü Örneği

Event Listener kullanmanın farklı bir örneği olarak, kullanıcının girdiği email adresinin geçerli bir formatta olup olmadığını kontrol edebilirsiniz. Bunu yapmak için, "input" event'ini kullanırız.

Öncelikle, HTML kodumuzda bir "input" alanı oluşturup, bir "button" ile birlikte "submit" işlevi ekleyelim. Ardından, JavaScript içinde bir event listener oluşturup, "submit" butonuna tıklanıldığında girdi alanındaki verileri kontrol edebiliriz.

Bunu yapmak için, bir "if" ifadesi kullanabiliriz ve girdiye girilen verilerin, "@" sembolü içermesi gerektiğini kontrol edebiliriz. Ayrıca, email adresinin ".com" veya ".edu" gibi bir domain uzantısına sahip olması gerektiğini de kontrol etmeliyiz.

Eğer email adresi geçerli bir formatta ise, sonucu bir "div" elementinde gösterebiliriz. Aksi takdirde, hata mesajını gösteren bir "alert" kutusu oluşturabiliriz.

Bu örnekle birlikte, kullanıcının girdiğindeki verilerin geçerliliğini kontrol ederek, doğru formatta olmayan email adreslerini tespit edebilir ve kullanıcılara hataları hakkında geri bildirim verebilirsiniz.

Şifre Formatı Kontrolü Örneği

Bir web uygulamasında kullanıcının güvenliği için şifre formatı kontrolü oldukça önemlidir. Kullanıcılar genellikle karmaşık bir şifre kullanmayı tercih etmezler. Bu nedenle, bir şifre formatı kontrolü oluşturularak, kullanıcılara uygun bir şifre oluşturmaları için yardımcı olunabilir.

Şifre formatı kontrolü oluşturmak için, öncelikle HTML ve JavaScript kullanarak bir form oluşturulur. Bu formda, kullanıcılardan şifrelerini girmeleri istenir. Ardından, JavaScript'te bir event listener oluşturarak, kullanıcının girdiği şifreyi kontrol edilir.

Şifre formatı kontrolü yapılırken, şifrenin belli bir uzunlukta olup olmadığı, büyük harf, küçük harf ve özel karakterlerin kullanılıp kullanılmadığı kontrol edilir. Eğer şifre bu kriterlere uymuyorsa, kullanıcıya uygun bir şifre oluşturması için uyarı verilir.

Bir şifre formatı kontrolü örneği oluşturmak için, öncelikle HTML formu oluşturulur. Bu formda, kullanıcı adı, email, ve şifre alanları bulunur. Şifre alanındaki veriler şifre formatı kontrolü ile kontrol edilir.

Eğer kullanıcının girdiği şifre uygun bir formatta değilse, hata mesajı gösterilir. Aksi takdirde, form gönderilir ve kullanıcıya başarılı bir şekilde kayıt olduğu bilgisi verilir.

Kısacası, bir şifre formatı kontrolü, kullanıcıların güvenliklerini sağlamak için oldukça önemlidir. Bu nedenle, bir web uygulamasında kullanıcının şifre oluşturma işlemi yaparken, bir şifre formatı kontrolü yapılması gereklidir.

Event Listener Kullanım İpuçları

Event Listener, JavaScript'te oldukça sık kullanılan bir kavramdır ve web sayfalarında dinamik etkileşimler yaratmak için kullanılmaktadır. Ancak, Event Listener kullanırken dikkat edilmesi gereken bazı noktalar vardır. Bu yazımızda, Event Listener kullanırken nelere dikkat etmeniz gerektiği hakkında bazı ipuçları vermek istiyoruz.

Birinci ve en önemli nokta, Event Listener'ın fazla kullanılmasıdır. Sayfada çok fazla Event Listener kullanıldığında, sayfanın yavaşlamasına neden olabilirsiniz. Bu nedenle, seçici kullanım yapmak ve fazla Listener kullanımından kaçınmak oldukça önemlidir. Ayrıca, gereksiz Event Listener'ları da kullanmamaya özen gösterin.

İkinci olarak, Event Listener fonksiyonlarının performansını arttırmak için, daha spesifik eventler kullanmayı tercih etmek gerekiyor. Örneğin, bir butonun tıklanması durumunda bir Event Listener kullanılacaksa, mouse up/down gibi spesifik bir event yerine click eventinin kullanılması önerilir.

Üçüncü olarak, Event Listener'lar eşleşmeyen elementler için kullanılmamalıdır. Event Listener'lar, sadece belirli elementler için geçerlidir ve geçerli olmayan elementlere atanması gereksiz yere kaynak tüketir, performansı düşürür.

Dördüncü ve son olarak, Event Listener'ların doğru bir şekilde kaldırılması gereklidir. Eğer bir Event Listener kaldırılmazsa, sayfa yenilendiğinde hala çalışmaya devam eder ve performans sorunlarına neden olur. Bu nedenle, Event Listener'ları kaldırırken dikkatli olunmalı ve sayfa içinde kullanılmayan Event Listener'lar mutlaka kaldırılmalıdır.

Yukarıda belirtilen ipuçları doğru bir şekilde uygulanarak, Event Listener'lar sayfa performansı ve etkililiği için oldukça yararlı olabilir. Ancak, dikkatli kullanımı ve gereksiz yere kullanılmaması da önemlidir.